007_Chrome的Waterfall详解

一、

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

• Queueing. 出现下面的情况时，浏览器会把当前请求放入队列中进行排队
  • 有更高优先级的请求时.
  • 和目标服务器已经建立了6个TCP连接（最多6个，适用于HTTP/1.0和HTTP/1.1）
  • 浏览器正在硬盘缓存上简单的分配空间
• Stalled. 请求会因为上面的任一个原因而阻塞
• DNS Lookup. 浏览器起正在解析IP地址.
• Proxy negotiation. The browser is negotiating the request with a proxy server.
• Request sent. The request is being sent.
• ServiceWorker Preparation. The browser is starting up the service worker.
• Request to ServiceWorker. The request is being sent to the service worker.
• Waiting (TTFB). 浏览器等待响应第一个字节到达的时间. 包含来回的延迟时间和服务器准备响应的时间.
• Content Download. The browser is receiving the response.
• Receiving Push. The browser is receiving data for this response via HTTP/2 Server Push.
• Reading Push. The browser is reading the local data previously received.

• DNS Lookup - 在浏览器和服务器进行通信之前, 必须经过DNS查询, 将域名转换成IP地址. 在这个阶段, 你可以处理的东西很少. 但幸运的是, 并非所有的请求都需要经过这一阶段.

• Initial Connection - 在浏览器发送请求之前, 必须建立TCP连接. 这个过程仅仅发生在瀑布图中的开头几行, 否则这就是个性能问题(后边细说).

• SSL/TLS Negotiation - 如果你的页面是通过SSL/TLS这类安全协议加载资源, 这段时间就是浏览器建立安全连接的过程. 目前Google将HTTPS作为其 搜索排名因素 之一, SSL/TLS 协商的使用变得越来越普遍了.

• Time To First Byte (TTFB) - TTFB 是浏览器请求发送到服务器的时间+服务器处理请求时间+响应报文的第一字节到达浏览器的时间. 我们用这个指标来判断你的web服务器是否性能不够, 或者说你是否需要使用CDN.

• Downloading - 这是浏览器用来下载资源所用的时间. 这段时间越长, 说明资源越大. 理想情况下, 你可以通过控制资源的大小来控制这段时间的长度.

根据瀑布图进行性能优化

那么我们如何是一个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长连接

二、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.

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

四、请求时间分析

(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)的时间

五、查看请求依赖

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.

Reference:

1、https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#timing

2、http://www.mamicode.com/info-detail-1015625.html