一、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行中解析出來的，查看源代碼可以看到這行是一個標簽去請求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的請求變成正常請求。
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、代碼測試
代碼如下：
DOM READY's TEST
DOM is not ready
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!");
}
效果：
jquery的$(document) .ready();就是用的DOMContentLoaded事件。
其他資源鏈接:
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/5443445.html有問題歡迎與我討論，共同進步。
)
+://+request.getServerName()+:+request.getServer)
