一、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、代碼測試

代碼如下：

demo of starof

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有問題歡迎與我討論，共同進步。

總結

以上是生活随笔為你收集整理的viewsource和viewparsed_Network Panel说明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。