Chrome开发者工具面板(Network)

NetWork面板组成

Network 面板可以记录页面上的网络请求的详情信息,从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间、Request和Response等),可以根据这个进行网络性能优化。

我把Google官方网站上介绍Network面板的图贴到这里,该面板主要包括5大块窗格(Pane):

  1. Controls 控制Network的外观和功能。
  2. Filters 控制Requests Table具体显示哪些内容。
  3. Overview 显示获取到资源的时间轴信息。
  4. Requests Table 按资源获取的前后顺序显示所有获取到的资源信息,点击资源名可以查看该资源的详细信息。
  5. Summary 显示总的请求数、数据传输量、加载时间信息。

Requests Table 相关介绍

  1. Name 资源名称,点击名称可以查看资源的详情情况,包括Headers、Preview、Response、Cookies、Timing等。
  2. Type 请求的资源MIME类型。
  3. Initiator 标记请求是由哪个对象或进程发起的(请求源)。
    • Parser: 请求由Chrome的HTML解析器时发起的。
    • Redirect:请求是由HTTP页面重定向发起的。
    • Script:请求是由Script脚本发起的。
    • Other:请求是由其他进程发起的,比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。
  4. Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
  5. Time 请求或下载的时间,从发起Request到获取到Response所用的总时间。
  6. Timeline 显示所有网络请求的可视化瀑布流(时间状态轴),点击时间轴,可以查看该请求的详细信息,点击列头则可以根据指定的字段可以排序。

如果需要显示更多的信息,右击 Table 头部即可勾选
Alt text

备注
Alt text

Capture screenshots(捕获屏幕)

Controls 窗格包括的功能有网络日志录制、日志清理、捕获屏幕、过滤器,视图切换、保留日志开关、Cache开关、网络连接开关、网速阀值。

以捕获屏幕为例:
点击摄像机按钮(捕获屏幕),重新加载页面即可捕获屏幕。双击其中的截屏可以放大显示,在放大的图下方可以点击跳转到上一帧或者下一帧。单击则可以查看该帧被捕获时的网络请求信息,并且在Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点。

Alt text

DOMContentLoaded and load

DOMContentLoaded 事件会在页面上 DOM 完全加载并解析完毕之后触发,不会等待CSS、图片、子框架加载完成。load 事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。

DOMContentLoaded 事件在 Overview 上用一条蓝色竖线标记,并且在Summary以蓝色文字显示确切的时间。
load 事件同样会在 Overview 和 Requests Table 上用一条红色竖线标记,在Summary也会以红色文字显示确切的时间。
Alt text

查看具体资源的详情

点击 某个资源的 Name 可以查看该资源的详细信息,根据资源类型显示的信息也不太一样,可能包括如下信息:

  • Headers 该资源的HTTP头信息。
  • Preview 根据你所选择的资源类型(JSON、图片、文本)显示相应的预览。
  • Response 显示HTTP的Response信息。
  • Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
  • Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

前4个都比较容易理解,主要看 Timing

Timing

在Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息,可能会涉及到如下过程的时间花费情况

  • Queuing
    排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源(图片)、服务器不可用、超过浏览器的并发请求的最大连接数(Chrome的最大并发连接数为6)

  • Stalled
    从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间,如果有已经建立好的连接,这个时间还包括等待已建立连接被复用的时间

  • Proxy Negotiation
    与代理服务器连接的时间花费

  • DNS Lookup
    执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。浏览器有缓存的话,则这个时间为0

  • Initial Connection / Connecting
    建立连接的时间花费,包含了TCP握手及重试时间

  • SSL
    完成SSL握手的时间花费

  • Request sent
    发起请求的时间

  • Waiting (Time to first byte (TTFB))
    是最初的网络请求被发起到从服务器接收到第一个字节这段时间,它包含了TCP连接时间,发送HTTP请求时间和获得响应消息第一个字节的时间。TTFB这个部分的时间花费如果超过200ms,则应该考虑对网络进行性能优化了。

  • Content Download
    获取Response响应数据的时间花费。

查看资源的发起者(请求源)和依赖项

通过按住Shift并且把光标移到资源名称上,可以查看该资源是由哪个对象或进程发起的(请求源)和对该资源的请求过程中引发了哪些资源(依赖资源)。

在该资源的上方第一个标记为绿色的资源就是该资源的发起者(请求源),有可能会有第二个标记为绿色的资源是该资源的发起者的发起者,以此类推。

猜你喜欢

转载自www.cnblogs.com/gaollard/p/9615608.html