Chrome调试工具使用及waterfall含义详解

1、waterfall含义详解

        浏览器根据html中外连资源出现的顺序，依次放入队列（Queue）,然后根据优先级确定向服务器获取资源的顺序。同优先级的资源根据html中出现的先后顺序来向服务器获取资源

• Queuing (排队)

  浏览器在以下情况下对请求排队

  1. 存在更高优先级的请求,请求被渲染引擎推迟，这经常发生在 images（图像）上,因为它被认为比关键资源（如脚本/样式）的优先级低。
  2. 此源已打开六个 TCP 连接，达到限值，仅适用于 HTTP/1.0 和 HTTP/1.1。在等待一个即将被释放的不可用的 TCP socket
  3. 浏览器正在短暂分配磁盘缓存中的空间，生成磁盘缓存条目（通常非常快）
• Stalled (停滞) - 发送请求之前等待的时间。它可能因为进入队列的任意原因而被阻塞，这个时间包括代理协商的时间。请求可能会因 Queueing 中描述的任何原因而停止。
• DNS lookup (DNS 查找) - 浏览器正在解析请求 IP 地址，页面上的每个新域都需要完整的往返(roundtrip)才能进行 DNS 查找
• Proxy Negotiation - 浏览器正在与代理服务器协商请求
• initial connection (初始连接) - 建立连接所需的时间，包括 TCP 握手/重试和协商 SSL。
• SSL handshake (SSL 握手) - 完成 SSL 握手所用的时间
• Request sent (请求发送) - 发出网络请求所花费的时间，通常是几分之一毫秒。
• Waiting (等待) - 等待初始响应所花费的时间，也称为Time To First Byte(接收到第一个字节所花费的时间)。这个时间除了等待服务器传递响应所花费的时间之外，还包括 1 次往返延迟时间及服务器准备响应所用的时间（服务器发送数据的延迟时间）
• Content Download(内容下载) - 接收响应数据所花费的时间(从接收到第一个字节开始，到下载完最后一个字节结束)
• ServiceWorker Preparation - 浏览器正在启动 Service Worker
• Request to ServiceWorker - 正在将请求发送到 Service Worker
• Receiving Push - 浏览器正在通过 HTTP/2 服务器推送接收此响应的数据
• Reading Push - 浏览器正在读取之前收到的本地数据

根据瀑布图进行性能优化

那么我们如何是一个web页面加载的更快并且创造更好的用户体验呢? 瀑布图提供是三个直观的玩意儿来协助我们达成这一目标:

1. 首先, 减少所有资源的加载时间. 亦即减小瀑布图的宽度. 瀑布图越窄, 网站的访问速度越快.

2. 其次, 减少请求数量 也就是降低瀑布图的高度. 瀑布图越矮越好.

3. 最后, 通过优化资源请求顺序来加快渲染时间. 从图上看, 就是将绿色的"开始渲染"线向左移. 这条线向左移动的越远越好.

        如图所示，select2_metro.css在位置上要比avatar1_small.png和index.js靠后，但是优先级确实最高(Higthest-->High-->Medium-->Low),所以这个下载顺序是：select2_metro.css-->index.js-->avatar1_small.png

         Connection ID:可以看到总共有6个值--166718、166774、166775、166776、166777、166778，因为浏览器并发数limit是6；如果两个url相同，就表示两个资源的下载共用的同一个tcp长连接

2、chrome调试工具使用

2.1 filter详解

(1)

Below is a complete list of supported properties. DevTools populates the dropdown with all of the HTTP methods it has encountered. 即写完下面的key+":"后,chrome会自动的弹出后面的值.

• domain. eg: domain:*.baidu.com会过滤出只有百度的域名.
• has-response-header. 过滤response的指定header. eg: has-response-header:ETag过滤出所有使用ETag协商缓存的网页。强缓存和协商缓存区别经典讲解:https://www.cnblogs.com/lyzg/p/5125934.html
• is. Use is:running to find WebSocket resources.   is:running 过滤是通过websocket的网页
• larger-than.  Setting a value of 1000 is equivalent to setting a value of 1k. eg:larger-than:28000 过滤大于28KB的网页
• method.  method过滤有多少请求方法,method:OPTIONS指定过滤某个方法
• mime-type. 展示是json的资源,eg: mime-type:application/json
• mixed-content. Show all mixed content resources (mixed-content:all) or just the ones that are currently displayed (mixed-content:displayed).
• scheme. Show resources retrieved over unprotected HTTP (scheme:http) or protected HTTPS (scheme:https).
• set-cookie-domain. Show the resources that have a Set-Cookie header with a Domain attribute that matches the specified value. 
• set-cookie-name. Show the resources that have a Set-Cookie header with a name that matches the specified value. 
• set-cookie-value. Show the resources that have a Set-Cookie header with a value that matches the specified value. 
• status-code. Only show resources whose HTTP status code match the specified code. 

2.2、同时显示多个按住command键盘+鼠标单选即可

2.3、请求时间分析

(1)在瀑布流根据"Response Time"、"Total Duration"等进行排序

 

(2)

Time. The total duration, from the start of the request to the receipt of the final byte in the response.

Waiting (TTFB). The browser is waiting for the first byte of a response. TTFB stands for Time To First Byte. This timing includes 1 round trip of latency and the time the server took to prepare the response.

Content Download. The browser is receiving the response.

"Content Download"的时间大于等于Time - Waiting (TTFB)的时间

2.4、查看请求依赖

To view the initiators and dependencies of a request, hold Shift and hover over the request in the Requests table.

DevTools colors initiators green, and dependencies red.

更多调试技巧详见chrome开发者工具：https://developers.google.cn/web/tools/chrome-devtools

参考资料：

https://www.cnblogs.com/LeoXnote/p/13395296.html

https://www.cnblogs.com/itcomputer/p/9222704.html