2.5 网络(Network)面板

2.5.1 请求分析

查看网络请求：
Network面板是开发者工具中用于监控和分析网页发出的所有网络请求的重要工具。当你打开网页时，浏览器会向服务器发送多个请求以加载HTML文档、CSS样式表、JavaScript脚本、图片等资源。Network面板会捕获这些请求，并按照时间顺序列出它们。

2.5.1.2 网络模块功能点

工具栏（Toolbar）

录制开关（Record button）：控制是否开始记录新的网络请求。
清除按钮（Clear button）：清除当前已记录的网络请求，以便重新开始记录。
筛选器（Filters）：允许开发者根据文本、类型、状态码等多种条件来过滤网络请求。以下是一些常见的请求类型及其说明：
1. 文档（Document）
类型标识：通常指的是HTML文档。
说明：这是页面加载的主要请求，包含了页面的结构和内容。在谷歌浏览器的开发者工具中，这个请求通常会以HTML文件的形式显示，其MIME类型（由Type列显示）为text/html。
2. 样式表（CSS）
类型标识：通过请求的MIME类型来识别，如text/css。
说明：这些请求用于加载页面的样式表，定义了页面的布局、颜色、字体等视觉样式。CSS文件可以是外部链接的，也可以是内嵌在HTML文档中的。
3. 脚本（JavaScript, JS）
类型标识：通过请求的MIME类型来识别，如application/javascript或text/javascript。
说明：这些请求用于加载页面的JavaScript脚本，用于实现页面的动态功能和交互效果。JavaScript代码可以是外部文件，也可以是内嵌在HTML文档中的

显示所有被记录的网络请求，每个请求以一行的形式展示，包含请求类型、状态码、请求和响应时间、请求大小等信息。
在请求列表中，默认情况下，最上面的是最早的请求。这一排序方式使得开发者能够按照请求发起的时间顺序来查看和分析网络请求，从而更容易地追踪和定位问题。
请求的默认名称说明

1. URL的最后一部分：

• 默认情况下，请求名会是URL的最后一部分内容。这通常指的是URL中的文件名或路径的最后一部分，它有助于快速识别请求的资源类型或目的。
• 例如，如果请求的URL是https://www.example.com/images/logo.png，那么请求名可能是logo.png。

2. 唯一性：

• 开发者工具会确保每个请求名在请求列表中都是唯一的，以便开发者能够清晰地区分不同的请求。

3. 截断与显示：

• 如果URL非常长或包含复杂的路径和查询参数，开发者工具可能会对其进行截断显示，但会保留足够的信息以便识别。
• 开发者可以通过鼠标悬停在截断的请求名上来查看完整的URL。
  特殊情况与自定义

1. 重定向：

• 如果请求发生了重定向，原始请求和重定向后的请求可能会在请求列表中分别显示，名称上可能会有所不同，以反映重定向的过程。

2. 缓存与重新验证：

• 对于从缓存中获取的资源，开发者工具可能会以特殊的方式标记这些请求，如显示(from cache)或类似的标识，但请求名本身通常不会改变。
• 需要注意的是，这种缓存状态的显示可能依赖于开发者工具的具体设置和浏览器的缓存策略。

3. 自定义名称：

• 标准的HTTP协议和谷歌浏览器开发者工具本身并不直接支持为请求设置自定义名称。然而，开发者可以通过在代码中添加特定的注释或日志信息来间接地实现这一点，但这需要额外的编程工作，并且不会直接反映在开发者工具的请求列表中。
  复制请求信息
  选中请求后，通过右键菜单的复制可以对请求相关信息进行复制，如下图：
  

对请求编辑并重发
在Firefox浏览器的开发者工具网络面板中，选中请求右键后，可以对请求进行编辑并重发。
编辑时，可以指定URL参数、消息头、消息体等内容，对于HTTP请求测试非常方便。

注意事项

• 开发者工具的版本更新可能会带来界面和功能上的变化，因此上述规则可能会随着版本的不同而有所差异。
• 在分析网络请求时，除了请求名之外，还应该关注请求的其他详细信息，如请求方法（GET、POST等）、状态码（200、404等）、请求头和响应头等，以便更全面地了解请求的过程和结果。
  请求详情视图（Request Details View）
  在谷歌浏览器的开发者工具中，网络模块是一个强大的工具，用于分析和调试网页的网络请求。详细请求中的六大块内容：
• 标头
• 预览
• 响应
• 启动器
• 时间
• Cookie
  各自包含了丰富的信息，下面将逐一详细介绍：
  1. 标头（Headers）
  标头部分包含了请求和响应的HTTP头部信息，是理解请求和响应之间交互的关键。标头内部可以细分为常规、请求标头、响应标头等部分：
• 常规：显示请求的URL、请求方法（如GET、POST）、状态码（如200 OK）、远程地址（服务器IP）以及协议版本（如HTTP/1.1或HTTP/2）等基本信息。
• 请求标头：列出了所有随请求发送的HTTP头部字段，如Host、User-Agent、Accept、Referer等。这些头部告诉服务器客户端的详细信息、客户端能够接受的媒体类型、客户端请求的来源等。
• 响应标头：列出了所有随响应返回的HTTP头部字段，如Content-Type、Content-Length、Server、Set-Cookie等。这些头部告诉客户端响应的媒体类型、内容长度、服务器信息以及可能设置的Cookie等。
  PS：点击原始按钮后可以查看响应标头和请求标头的原始内容。
  

2. 预览（Preview）
预览部分提供了一个可视化的窗口，用于显示响应体的内容。如果响应是文本、HTML、JSON或XML等格式，则可以在此部分直接查看和格式化这些内容，以便快速理解和调试。
3. 响应（Response）
响应部分显示了响应的原始数据，包括状态行、响应头和响应体。与预览部分不同，这里显示的是未经格式化的原始数据，对于需要查看完整响应或调试特定格式数据的开发者来说非常有用。
4. 启动器（Initiator）
启动器部分显示了导致该请求被发起的原因或源头。它可能是一个脚本、一个样式表、一个图片或其他资源。点击启动器旁边的链接，可以跳转到引发该请求的源代码位置，这对于追踪和理解请求的上下文非常有帮助。
5. 时间（Timing）
时间部分提供了请求从开始到结束各个阶段的详细时间信息，包括排队时间、DNS解析时间、连接时间、发送请求时间、等待响应时间（TTFB）和内容下载时间等。这些信息对于分析请求的性能瓶颈和优化页面加载速度至关重要。
6. Cookie
Cookie部分列出了与该请求相关的所有Cookie信息。Cookie是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。在这里，可以查看每个Cookie的名称、值、域、路径、过期时间等详细信息。
时间线（Timeline）
以瀑布图的形式展示每个请求的加载过程，包括发起请求、等待响应、接收数据等各个阶段的时间消耗，帮助开发者分析性能瓶颈。

2.5.2 性能优化

2.5.2.1 识别性能瓶颈：

通过分析Network面板中的网络请求，你可以识别出性能瓶颈，如：
加载时间过长：某些资源加载时间过长，可能是因为文件体积过大、服务器响应慢或网络延迟高。
请求过多：页面加载了过多的资源，导致总加载时间过长。
缓存未命中：浏览器没有从缓存中加载资源，而是重新向服务器发送了请求。

2.5.2.2 优化策略：

针对这些问题，你可以采取以下优化策略：
压缩和优化资源：使用工具压缩图片、CSS和JavaScript文件，减少文件体积。
合并和拆分资源：合并多个小文件以减少请求次数，拆分大文件以利用并行加载。
设置合理的缓存策略：通过设置HTTP缓存控制指令，如Cache-Control和Expires，来控制资源的缓存行为。
优化资源加载顺序：确保关键资源优先加载，非关键资源延迟加载或异步加载。
示例：
假设你发现某个图片资源加载时间过长，你可以使用图片压缩工具来减小图片体积，并设置合适的缓存策略以减少后续加载时间。

2.5.3 模拟网络条件

2.5.3.1 模拟不同网络条件：

Network面板还提供了模拟不同网络条件的功能，如慢速网络、离线等。这有助于你测试网页在不同网络环境下的响应能力，确保网页在各种条件下都能提供良好的用户体验。

2.5.3.2 设置模拟条件：

在Network面板的顶部，你可以找到一个下拉菜单，用于选择不同的网络条件。选择一个模拟条件后，浏览器将调整其网络请求行为以模拟该条件下的网络延迟和带宽限制。
示例：
你可以将网络条件设置为Slow 3G，然后重新加载页面，观察页面加载速度和资源加载情况。这将帮助你识别出在慢速网络环境下可能出现的性能问题，并采取相应的优化措施。