007_Chrome的Waterfall詳解

 

1、

瀏覽器根據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個值--16671八、16677四、16677五、16677六、16677七、166778，由於瀏覽器併發數limit是6；若是兩個url相同，就表示兩個資源的下載共用的同一個tcp長鏈接

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

3、同時顯示多個按住command鍵盤+鼠標單選便可

4、請求時間分析

(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)的時間

5、查看請求依賴

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:

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

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