一、chrome Developer Tools：Network Panel

從網(wǎng)絡(luò)面板中可以獲取很多有用信息，如詳細(xì)的時(shí)間數(shù)據(jù)，http請(qǐng)求頭響應(yīng)頭，cookies，WebSocket數(shù)據(jù)。

通過分析這些數(shù)據(jù)，可以知道哪個(gè)資源加載耗時(shí)最久，誰發(fā)起的網(wǎng)絡(luò)請(qǐng)求，這些對(duì)性能優(yōu)化很有幫助。

這些數(shù)據(jù)的獲取都是通過一個(gè)api來完成的，Resource Timing API。

我們不需要知道它的實(shí)現(xiàn)原理，只要知道它能提供什么數(shù)據(jù)即可。

這些數(shù)據(jù)也可通過chrome瀏覽器的window.performace對(duì)象獲取，如下

二、Network Panel概況

network監(jiān)控網(wǎng)頁中所有的http請(qǐng)求，一行代表一個(gè)http請(qǐng)求，每個(gè)字段代表請(qǐng)求的不同屬性和狀態(tài)。

1、切換面板行的信息量(橫向)。

點(diǎn)擊按鈕

精簡顯示信息，點(diǎn)擊按鈕

顯示全部信息。

顯示全部信息時(shí)包括主要的域和次要的域(如下圖紅色框中的Time和Latency)，精簡時(shí)就只顯示主要的域(如下圖中紅色框中Time)。

2、增刪網(wǎng)絡(luò)面板的列(縱向)。

一條資源的請(qǐng)求就是一行，包括很多列參數(shù)，默認(rèn)如下。

Name?and Path：請(qǐng)求資源的名稱和路徑

Method ：請(qǐng)求方法，常用get,post

Status?and Text：HTTP狀態(tài)碼和文本信息

Domain：請(qǐng)求資源的域名

Type：請(qǐng)求資源的MIME類型

Initiator：發(fā)送請(qǐng)求的對(duì)象(如Parser，Redirect，Script,Other)

比如下圖中請(qǐng)求menu.css的資源的Initiator顯示為(index):650[paraser]，表示該css文件是從首頁html的第650行中解析出來的，查看源代碼可以看到這行是一個(gè)標(biāo)簽去請(qǐng)求menu.css資源。

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

cookies:請(qǐng)求帶了多個(gè)條cookies，cookie數(shù)在請(qǐng)求詳情中也可以看到。

Size?and content：size是http請(qǐng)求傳輸?shù)恼鎸?shí)大小，包括響應(yīng)頭和響應(yīng)體;content表示響應(yīng)體解壓后的大小(如果有壓縮的話，一般為gzip壓縮)。如果采用了gzip編碼傳輸，一般情況content比size大，否則content小于size。如果資源是從瀏覽器緩存加載的而不是通過網(wǎng)絡(luò)獲取，則content為?from cache。

比如下圖這個(gè)js請(qǐng)求，size為64.7kb,content為201kb,說明請(qǐng)求該資源時(shí)服務(wù)器采用壓縮傳輸，大小為64.7kb,可以點(diǎn)擊查看資源詳情，在Headers里可以看到Content-Encoding:gzip采用gzip壓縮傳輸。瀏覽器解壓后真正的內(nèi)容大小為201kb，這樣可以減少服務(wù)器帶寬壓力。

Time?and Latency：Time表示發(fā)送請(qǐng)求到接收響應(yīng)的最后一個(gè)字節(jié)所花的實(shí)際，即請(qǐng)求一個(gè)資源花的總時(shí)間，Latency表示從發(fā)送請(qǐng)求到接收響應(yīng)的第一個(gè)字節(jié)所花的時(shí)間，即延遲。由此可見，Time減去Latency就反應(yīng)帶寬問題了，包括客戶端和服務(wù)器帶寬。

Timeline：整個(gè)請(qǐng)求過程時(shí)間軸，可以看出時(shí)間到底花在哪里了。

默認(rèn)只顯示部分列的信息，在標(biāo)頭右鍵出來一個(gè)列表，打?qū)吹木褪钦故镜?#xff0c;去掉對(duì)勾就好在網(wǎng)絡(luò)面板的表格中刪掉這一列。

3、請(qǐng)求排序

請(qǐng)求默認(rèn)按請(qǐng)求開始時(shí)間排序，為對(duì)Size和Time的排序是非常常用的，一眼可以看出哪個(gè)請(qǐng)求比較耗資源。

隊(duì)Timeline的排序可以有多個(gè)選項(xiàng)：

Timeline，默認(rèn)值，按每個(gè)http請(qǐng)求的start time排序，同Start Time。

Start Time，同Timeline排序。

Response Time,按http請(qǐng)求的response time排序。

End Time：按http請(qǐng)求的

Duration：按請(qǐng)求花費(fèi)總時(shí)間排序。

Latency：請(qǐng)求開始到接收響應(yīng)的第一個(gè)字節(jié)的這段時(shí)長(即TTFB—time to first byte)排序。

4、保留歷史log

跳轉(zhuǎn)時(shí)想保留之前的日子，用preserve log選項(xiàng)。如果不勾選，每次刷新log就沒了，勾選上Preserve log，每次刷新都會(huì)保留log，比如刷新3次就會(huì)有三次請(qǐng)求的log。頁面跳轉(zhuǎn)到其他地址log也會(huì)保留。

5、一條請(qǐng)求詳情

單擊任意一條http請(qǐng)求，可查看詳情。

HTTP request and response?Headers：包括request URL，HTTP method，response 狀態(tài)碼等。可以通過切換view parsed/view source查看格式化的http headers和原始信息。

Resource?Preview：可以預(yù)覽圖片或者格式化過的JSON信息。

HTTP?Response：返回未格式化的的原始信息。

Cookies?names and values：包括Request cookies和Response cookies。

Resource network?Timing：請(qǐng)求到響應(yīng)的時(shí)間分布。

6、請(qǐng)求過濾

只顯示指定類型請(qǐng)求，如img，css，js等。

漏斗形的按鈕，意思是是否啟用過濾信息選項(xiàng)。啟用后可在下面一列中篩選(Hide data URLS，XHR,JS，CSS等)。

更高級(jí)點(diǎn)，可以進(jìn)行請(qǐng)求查詢，即在前面的輸入框中輸入相應(yīng)的字符對(duì)http信息進(jìn)行匹配。比如輸入Status-code:200篩選出狀態(tài)碼為200的請(qǐng)求。

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

還可以通過在查詢條件前面加上“-”來進(jìn)行反選。如下圖，在status-code前面加了負(fù)號(hào)，就可以篩選出所有狀態(tài)碼不是200的請(qǐng)求。

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

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：比如有一個(gè)cookie為loggedIn=true，可通過loggedIn篩選

set-cookie-value：比如有一個(gè)cookie為loggedIn=true，可通過true篩選

set-cookie-domain：

status-code：比如200

7、禁用緩存

勾選Disable cache選項(xiàng)，可禁用緩存，所有的狀態(tài)碼為304的請(qǐng)求和size為from cache的請(qǐng)求變成正常請(qǐng)求。

8、一個(gè)請(qǐng)求花費(fèi)具體時(shí)間分析

以請(qǐng)求imagemap.php為例。

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

(官方的一個(gè)更全的圖如下)

Connection Setup：建立與服務(wù)器的連接。具體包括Queueing和Stalled...。

Queueing：不是太清楚，好像是在本地防火墻的等待時(shí)間，或者是某些插件攔截時(shí)間。

Stalled：網(wǎng)絡(luò)延時(shí)。指瀏覽器得到要發(fā)出這個(gè)請(qǐng)求的指令，到請(qǐng)求可以發(fā)出的等待時(shí)間。一般是代理協(xié)商、以及等待可復(fù)用的TCP連接釋放的時(shí)間，不包括DNS查詢、建立TCP連接時(shí)間等。

Proxy Negotiation:與代理服務(wù)器的連接時(shí)間。

DNS LookUp：表示DNS查詢時(shí)間，如果第一次訪問的是域名就需要查找，IP地址的話不需要，上圖中沒有這個(gè)參數(shù)，說明本地緩存了域名服務(wù)器的IP，瀏覽器不需要查詢，直接通過IP請(qǐng)求服務(wù)器。

Initail Connection：建立連接的時(shí)間，包括?TCP?handshakes/retries和negotiating a?SSL.

Request/Response：請(qǐng)求與響應(yīng)的時(shí)間。具體包括Request Sent，Waiting,Content Download

Request sent:發(fā)送HTTP請(qǐng)求到服務(wù)器的時(shí)間，即上傳時(shí)間，這個(gè)時(shí)間取決于發(fā)送請(qǐng)求的數(shù)據(jù)量的大小。

Waiting(TTFB)：發(fā)送請(qǐng)求后收到響應(yīng)的第一個(gè)字節(jié)所花費(fèi)的時(shí)間，TTFB(time to first bytes)；這是服務(wù)器優(yōu)化的重要指標(biāo)，服務(wù)器優(yōu)化的目的就是減少這個(gè)時(shí)間。

Content Download：從服務(wù)器獲取響應(yīng)數(shù)據(jù)的時(shí)間，下載時(shí)間，即上面的Time減去Latency的時(shí)間，這是反應(yīng)帶寬的重要指標(biāo)。受響應(yīng)消息內(nèi)容大小，網(wǎng)絡(luò)帶寬，是否使用http壓縮等影響。

三、頁面加載時(shí)間分析

Finish:1.39s ：表示整個(gè)頁面加載時(shí)間為640ms。

DOMContentLoaded:998ms?：發(fā)生在頁面DOMContentLoaded事件的啟動(dòng)時(shí)間點(diǎn)，對(duì)應(yīng)上圖藍(lán)色豎線。

Load:1.39s：表示頁面load事件的啟動(dòng)時(shí)間點(diǎn)，對(duì)應(yīng)上圖紅色豎線。

1、window.onload和DOMContentLoaded詳解

DOMContentLoaded事件要在window.onload之前執(zhí)行，DOM樹構(gòu)建完成時(shí)執(zhí)行DOMContentLoaded事件，而window.onload是在頁面載入完成時(shí)才執(zhí)行，包括圖片等加載完成。

2、代碼測(cè)試

代碼如下：

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,因知識(shí)本身在變化，作者也在不斷學(xué)習(xí)成長，文章內(nèi)容也不定時(shí)更新，為避免誤導(dǎo)讀者，方便追根溯源，請(qǐng)諸位轉(zhuǎn)載注明出處：http://www.cnblogs.com/starof/p/5443445.html有問題歡迎與我討論，共同進(jìn)步。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。