Chrome Developer Tools：Network Panel說明

1、chrome Developer Tools：Network Panel

從網絡面板中能夠獲取不少有用信息，如詳細的時間數據，http請求頭響應頭，cookies，WebSocket數據。

經過分析這些數據，能夠知道哪一個資源加載耗時最久，誰發起的網絡請求，這些對性能優化頗有幫助。

這些數據的獲取都是經過一個api來完成的，Resource Timing API。

咱們不須要知道它的實現原理，只要知道它能提供什麼數據便可。

這些數據也可經過chrome瀏覽器的window.performace對象獲取，以下

2、Network Panel概況

network監控網頁中全部的http請求，一行表明一個http請求，每一個字段表明請求的不一樣屬性和狀態。

一、切換面板行的信息量（橫向）。

點擊按鈕精簡顯示信息，點擊按鈕顯示所有信息。

顯示所有信息時包括主要的域和次要的域（以下圖紅色框中的Time和Latency），精簡時就只顯示主要的域（以下圖中紅色框中Time）。

二、增刪網絡面板的列（縱向）。

一條資源的請求就是一行，包括不少列參數，默認以下。

• Name and Path：請求資源的名稱和路徑
• Method ：請求方法，經常使用get,post
• Status and Text：HTTP狀態碼和文本信息
• Domain：請求資源的域名
• Type：請求資源的MIME類型
• Initiator：發送請求的對象（如Parser，Redirect，Script,Other）

好比下圖中請求menu.css的資源的Initiator顯示爲(index):650[paraser]，表示該css文件是從首頁html的第650行中解析出來的，查看源代碼能夠看到這行是一個<link>標籤去請求menu.css資源。

有的資源的Initiator一列爲Script，表示該資源是經過某js文件加載的。

• cookies:請求帶了多個條cookies，cookie數在請求詳情中也能夠看到。
• Size and content：size是http請求傳輸的真實大小，包括響應頭和響應體;content表示響應體解壓後的大小（若是有壓縮的話，通常爲gzip壓縮）。若是採用了gzip編碼傳輸，通常狀況content比size大，不然content小於size。若是資源是從瀏覽器緩存加載的而不是經過網絡獲取，則content爲 from cache。

好比下圖這個js請求，size爲64.7kb,content爲201kb,說明請求該資源時服務器採用壓縮傳輸，大小爲64.7kb,能夠點擊查看資源詳情，在Headers裏能夠看到Content-Encoding:gzip採用gzip壓縮傳輸。瀏覽器解壓後真正的內容大小爲201kb，這樣能夠減小服務器帶寬壓力。

• Time and Latency：Time表示發送請求到接收響應的最後一個字節所花的實際，即請求一個資源花的總時間，Latency表示從發送請求到接收響應的第一個字節所花的時間，即延遲。因而可知，Time減去Latency就反應帶寬問題了，包括客戶端和服務器帶寬。
• Timeline：整個請求過程時間軸，能夠看出時間到底花在哪裏了。

默認只顯示部分列的信息，在標頭右鍵出來一個列表，打對勾的就是展現的，去掉對勾就好在網絡面板的表格中刪掉這一列。

三、請求排序

請求默認按請求開始時間排序，爲對Size和Time的排序是很是經常使用的，一眼能夠看出哪一個請求比較耗資源。

隊Timeline的排序能夠有多個選項：

• Timeline，默認值，按每一個http請求的start time排序，同Start Time。
• Start Time，同Timeline排序。
• Response Time,按http請求的response time排序。
• End Time：按http請求的
• Duration：按請求花費總時間排序。
• Latency：請求開始到接收響應的第一個字節的這段時長（即TTFB—time to first byte）排序。

四、保留歷史log

跳轉時想保留以前的日子，用preserve log選項。若是不勾選，每次刷新log就沒了，勾選上Preserve log，每次刷新都會保留log，好比刷新3次就會有三次請求的log。頁面跳轉到其餘地址log也會保留。

五、一條請求詳情

單擊任意一條http請求，可查看詳情。

• HTTP request and response Headers：包括request URL，HTTP method，response 狀態碼等。能夠經過切換view parsed/view source查看格式化的http headers和原始信息。

• Resource Preview：能夠預覽圖片或者格式化過的JSON信息。

• HTTP Response：返回未格式化的的原始信息。
• Cookies names and values：包括Request cookies和Response cookies。

• Resource network Timing：請求到響應的時間分佈。

六、請求過濾

只顯示指定類型請求，如img，css，js等。

漏斗形的按鈕，意思是是否啓用過濾信息選項。啓用後可在下面一列中篩選（Hide data URLS，XHR,JS，CSS等）。

更高級點，能夠進行請求查詢，即在前面的輸入框中輸入相應的字符對http信息進行匹配。好比輸入Status-code:200篩選出狀態碼爲200的請求。

查詢的時候，輸入的信息包括type(StatusCode)和value(200)。瀏覽器會給出自動補全提示，按上下箭頭或tab選擇。

還能夠經過在查詢條件前面加上「-」來進行反選。以下圖，在status-code前面加了負號，就能夠篩選出全部狀態碼不是200的請求。

一些可用的過濾類型以下：

• domain:好比www.google-analytics.com
• has-response-header：好比Access-Control-Allow-Origin
• is：好比running
• larger-than:好比larger-than:50, larger-than:150k, larger-than:2m
• method：好比GET
• mime-type：就是Content-type，好比text/html
• scheme：好比https
• set-cookie-name：好比有一個cookie爲loggedIn=true，可經過loggedIn篩選
• set-cookie-value：好比有一個cookie爲loggedIn=true，可經過true篩選
• set-cookie-domain：
• status-code：好比200

七、禁用緩存

勾選Disable cache選項，可禁用緩存，全部的狀態碼爲304的請求和size爲from cache的請求變成正常請求。

八、一個請求花費具體時間分析

以請求imagemap.php爲例。

消耗時間總共711.41ms，包括2部分Connection Setup和Request/Response：

（官方的一個更全的圖以下）

• Connection Setup：創建與服務器的鏈接。具體包括Queueing和Stalled...。
  • Queueing：不是太清楚，好像是在本地防火牆的等待時間，或者是某些插件攔截時間。
  • Stalled：網絡延時。指瀏覽器獲得要發出這個請求的指令，到請求能夠發出的等待時間。通常是代理協商、以及等待可複用的TCP鏈接釋放的時間，不包括DNS查詢、創建TCP鏈接時間等。
  • Proxy Negotiation:與代理服務器的鏈接時間。
  • DNS LookUp：表示DNS查詢時間，若是第一次訪問的是域名就須要查找，IP地址的話不須要，上圖中沒有這個參數，說明本地緩存了域名服務器的IP，瀏覽器不須要查詢，直接經過IP請求服務器。
  • Initail Connection：創建鏈接的時間，包括 TCP handshakes/retries和negotiating a SSL.
• Request/Response：請求與響應的時間。具體包括Request Sent，Waiting,Content Download
  • Request sent:發送HTTP請求到服務器的時間，即上傳時間，這個時間取決於發送請求的數據量的大小。
  • Waiting(TTFB)：發送請求後收到響應的第一個字節所花費的時間，TTFB(time to first bytes)；這是服務器優化的重要指標，服務器優化的目的就是減小這個時間。
  • Content Download：從服務器獲取響應數據的時間，下載時間，即上面的Time減去Latency的時間，這是反應帶寬的重要指標。受響應消息內容大小，網絡帶寬，是否使用http壓縮等影響。

3、頁面加載時間分析

Finish:1.39s ：表示整個頁面加載時間爲640ms。

DOMContentLoaded:998ms ：發生在頁面DOMContentLoaded事件的啓動時間點，對應上圖藍色豎線。

Load:1.39s：表示頁面load事件的啓動時間點，對應上圖紅色豎線。

 

一、window.onload和DOMContentLoaded詳解

DOMContentLoaded事件要在window.onload以前執行，DOM樹構建完成時執行DOMContentLoaded事件，而window.onload是在頁面載入完成時才執行，包括圖片等加載完成。

二、代碼測試

代碼以下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo of starof</title>
    <script src="http://code.jquery.com/jquery-1.4.1.min.js" integrity="sha256-LOx49zn73f7YUs15NNJTDnzEyPFLOGc7A7pfuICtTMc=" crossorigin="anonymous"></script>
</head>

<body>
    <h1> DOM READY's TEST </h1>
    <p id="status"> DOM is not ready </p>
    <script>
    alert("111");
    if (document.addEventListener) {
        function DOMContentLoaded() {
            $("#status").text("DOM is ready now!");
            alert("222");
        }
        document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);
    }
    window.onload = function() {
        $("#status").text("DOM is ready AND wondow.onload is excute!");
    }
    </script>
</body>

</html>

效果：

jquery的$(document) .ready();就是用的DOMContentLoaded事件。

 

 

其餘資源連接:

• PageSpeed Insights PageSpeed optimization tools
• High Performance Networking in Google Chrome 
  
• How gzip compression works 
  
• Web Performance Best Practices