官方資料：Chrome Developer Tools: Network Panel
一、chrome Developer Tools：Network Panel
從網絡面板中可以獲取很多有用信息，如詳細的時間數據，http請求頭響應頭，cookies，WebSocket數據。
通過分析這些數據，可以知道哪個資源加載耗時最久，誰發起的網絡請求，這些對性能優化很有幫助。
這些數據的獲取都是通過一個api來完成的，Resource Timing API。
我們不需要知道它的實現原理，只要知道它能提供什么數據即可。
這些數據也可通過chrome瀏覽器的window.performace對象獲取，如下
二、Network Panel概況
network監控網頁中所有的http請求，一行代表一個http請求，每個字段代表請求的不同屬性和狀態。
1、切換面板行的信息量（橫向）。
點擊按鈕
精簡顯示信息，點擊按鈕
顯示全部信息。
顯示全部信息時包括主要的域和次要的域（如下圖紅色框中的Time和Latency），精簡時就只顯示主要的域（如下圖中紅色框中Time）。
2、增刪網絡面板的列（縱向）。
一條資源的請求就是一行，包括很多列參數，默認如下。
- 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：整個請求過程時間軸，可以看出時間到底花在哪里了。
默認只顯示部分列的信息，在標頭右鍵出來一個列表，打對勾的就是展示的，去掉對勾就好在網絡面板的表格中刪掉這一列。
3、請求排序
請求默認按請求開始時間排序，為對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）排序。
4、保留歷史log
跳轉時想保留之前的日子，用preserve log選項。如果不勾選，每次刷新log就沒了，勾選上Preserve log，每次刷新都會保留log，比如刷新3次就會有三次請求的log。頁面跳轉到其他地址log也會保留。
5、一條請求詳情
單擊任意一條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：請求到響應的時間分布。
6、請求過濾
只顯示指定類型請求，如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
7、禁用緩存
勾選Disable cache選項，可禁用緩存，所有的狀態碼為304的請求和size為from cache的請求變成正常請求。
如果修改了js、css或圖片資源 后刷新頁面，勾上這個，就不會受緩存影響了。
8、一個請求花費具體時間分析
以請求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壓縮等影響。
三、頁面加載時間分析
Finish:1.39s ：表示整個頁面加載時間為640ms。
DOMContentLoaded:998ms ：發生在頁面DOMContentLoaded事件的啟動時間點，對應上圖藍色豎線。
Load:1.39s：表示頁面load事件的啟動時間點，對應上圖紅色豎線。
1、window.onload和DOMContentLoaded詳解
DOMContentLoaded事件要在window.onload之前執行，DOM樹構建完成時執行DOMContentLoaded事件，而window.onload是在頁面載入完成時才執行，包括圖片等加載完成。
2、代碼測試
代碼如下：
<!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
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/5481935.html有問題歡迎與我討論，共同進步。