Chrome開(kāi)發(fā)工具 評(píng)估網(wǎng)絡(luò)性能

評(píng)估網(wǎng)絡(luò)性能

關(guān)于您的每個(gè)應(yīng)用程序的網(wǎng)絡(luò)運(yùn)營(yíng)，包括詳細(xì)的時(shí)序數(shù)據(jù)，HTTP請(qǐng)求和響應(yīng)頭，cookies，WebSocket的數(shù)據(jù)，以及更多的網(wǎng)絡(luò)小組記錄的信息。網(wǎng)絡(luò)面板可幫助你解答您的Web應(yīng)用程序的網(wǎng)絡(luò)性能問(wèn)題，如：

• 其中資源最慢時(shí)間第一個(gè)字節(jié)？
• 哪些資源加載（持續(xù)時(shí)間）的時(shí)間最長(zhǎng)？
• 是誰(shuí)發(fā)起的特定網(wǎng)絡(luò)請(qǐng)求？
• 多少時(shí)間花費(fèi)在各種網(wǎng)絡(luò)階段的特定資源？

關(guān)于資源定時(shí) API

網(wǎng)絡(luò)面板使用資源計(jì)時(shí) API，一個(gè) JavaScript API，提供詳細(xì)的網(wǎng)絡(luò)定時(shí)數(shù)據(jù)為每個(gè)加載的資源。例如，該 API 可以告訴你準(zhǔn)確的圖像 HTTP 請(qǐng)求啟動(dòng)時(shí)，被接收的圖像的最后一個(gè)字節(jié)時(shí)。下圖顯示了資源定時(shí) API 提供了網(wǎng)絡(luò)定時(shí)的數(shù)據(jù)點(diǎn)。

該 API 可用于任何網(wǎng)頁(yè)，而不僅僅是 DevTools。在 Chrome 瀏覽器，它暴露了全球window.performance對(duì)象的方法。該performance.getEntries（）方法返回“資源定時(shí)對(duì)象”，一個(gè)頁(yè)面上的每個(gè)請(qǐng)求的資源的數(shù)組。

試試這個(gè)：打開(kāi) JavaScript 控制臺(tái)當(dāng)前頁(yè)面，輸入以下的提示，并回車(chē)：

window.performance.getEntries()[0]

試試這個(gè)：打開(kāi) JavaScript 控制臺(tái)當(dāng)前頁(yè)面，輸入以下的提示，并回車(chē)：

每個(gè)時(shí)間戳是微秒，即ResolutionTime規(guī)范。此 API 可 inChrome 作為window.performance.now（）方法。

網(wǎng)絡(luò)面板概述

網(wǎng)絡(luò)面板會(huì)自動(dòng)記錄所有的網(wǎng)絡(luò)活動(dòng)，而 DevTools 是開(kāi)放的。當(dāng)你第一次打開(kāi)面板時(shí)可能為空。刷新頁(yè)面開(kāi)始記錄，或者干脆等待網(wǎng)絡(luò)活動(dòng)發(fā)生在你的應(yīng)用程序中。

每個(gè)請(qǐng)求的資源被添加作為行到網(wǎng)絡(luò)表，其中包含下面列出的列。請(qǐng)注意以下有關(guān)網(wǎng)絡(luò)表：

• 未在下面列出的所有列在默認(rèn)情況下可見(jiàn);您可以輕松地顯示或隱藏列。
• 某些列包含主字段和次級(jí)領(lǐng)域（例如：時(shí)間和等待時(shí)間）。當(dāng)觀看網(wǎng)絡(luò)表的大資源行這兩個(gè)領(lǐng)域都顯示;使用小的資源行時(shí)只有主域顯示。
• 你可以通過(guò)單擊列標(biāo)題由列的值排序表。在時(shí)間軸中列的行為有所不同：?jiǎn)螕羝淞袠?biāo)題顯示的其他排序字段的菜單。見(jiàn)瀑布景色，排序和過(guò)濾的更多信息。

在保存導(dǎo)航網(wǎng)絡(luò)日志

默認(rèn)情況下，當(dāng)前的網(wǎng)絡(luò)日志記錄時(shí)，會(huì)導(dǎo)航到另一個(gè)頁(yè)面，或者刷新當(dāng)前頁(yè)面丟棄。要保留日志記錄在這些情況下，單擊黑色 保留日志在導(dǎo)航鍵不要在導(dǎo)航在網(wǎng)絡(luò)面板底部保存日志;新記錄被追加到表的底部。再次單擊該按鈕（紅色保留在導(dǎo)航資源）來(lái)禁用日志保存。

排序和過(guò)濾

默認(rèn)情況下，在網(wǎng)絡(luò)表的資源是由每個(gè)請(qǐng)求（在網(wǎng)絡(luò)“瀑布”）的開(kāi)始時(shí)間進(jìn)行排序。您可以通過(guò)單擊列標(biāo)題排序表由另一列值。再次單擊該標(biāo)題更改排序順序（升序或降序）。

時(shí)間軸列是別人的獨(dú)特之處，點(diǎn)擊后，會(huì)顯示額外的排序字段的菜單。

該菜單包含以下排序選項(xiàng)：

• 時(shí)間軸 - 排序由每個(gè)網(wǎng)絡(luò)請(qǐng)求的開(kāi)始時(shí)間。這是默認(rèn)的排序，并且是相同的開(kāi)始時(shí)間選項(xiàng)排序）。
• 開(kāi)始時(shí)間 - 由每個(gè)網(wǎng)絡(luò)請(qǐng)求的開(kāi)始時(shí)間排序（同樣如由時(shí)間軸選項(xiàng)排序）。
• 響應(yīng)時(shí)間 - 通過(guò)排序每個(gè)請(qǐng)求的響應(yīng)時(shí)間。
• 結(jié)束時(shí)間 - 通過(guò)排序時(shí)，每個(gè)請(qǐng)求完成的時(shí)間。
• 持續(xù)時(shí)間 - 排序由每個(gè)請(qǐng)求的總時(shí)間。
• 延遲 - 排序由請(qǐng)求的開(kāi)始和響應(yīng)的開(kāi)始之間的時(shí)間（也被稱(chēng)為“時(shí)間到第一個(gè)字節(jié)”）。

要過(guò)濾的網(wǎng)絡(luò)表，只顯示某些類(lèi)型的資源，單擊內(nèi)容類(lèi)型之一沿著面板的底部：文檔，樣式表，圖片，腳本，XHR，字體的 WebSockets 和其他。在下面的截圖只CSS資源顯示。要查看所有內(nèi)容類(lèi)型，單擊全部過(guò)濾器按鈕。

高級(jí)過(guò)濾

除了資源類(lèi)型過(guò)濾，可以過(guò)濾查詢(xún)縮小資源。在過(guò)濾器輸入字段200：例如，要查找其中有 200 狀態(tài)碼的所有資源，你可以輸入查詢(xún)的StatusCode。

請(qǐng)注意以下行為：過(guò)濾器查詢(xún)包含一個(gè)類(lèi)型（的StatusCode）和價(jià)值（200）。過(guò)濾器查詢(xún)是不區(qū)分大小寫(xiě)，所以你可以鍵入大寫(xiě)或小寫(xiě)。該過(guò)濾器類(lèi)型為您提供了自動(dòng)完成建議。使用箭頭鍵來(lái)形成一個(gè)選擇，然后按Tab鍵選擇它。該過(guò)濾器值具有自動(dòng)完成這表明你重視存在于當(dāng)前的網(wǎng)絡(luò)記錄。快速預(yù)覽您的查詢(xún)的結(jié)果，使用Up/Down箭頭鍵循環(huán)通過(guò)自動(dòng)完成建議。結(jié)果立即出現(xiàn)，即使你不按Enter鍵或選項(xiàng)卡來(lái)完成選擇。否定過(guò)濾器的查詢(xún)，在前面加上一個(gè)破折號(hào)查詢(xún)（ - ），例如-StatusCode：200。

可用過(guò)濾器類(lèi)型：

使用上面列表中顯示的查詢(xún)，構(gòu)建它的格式為：<過(guò)濾器類(lèi)型>：<說(shuō)明>。你幾乎總是要使用自動(dòng)完成建議可確保您的查詢(xún)有效。

添加和刪除表中的列

您可以通過(guò)改變網(wǎng)絡(luò)表顯示的列的默認(rèn)設(shè)置。要顯示或隱藏列，右鍵+單擊或控制+單擊（僅限Mac）在表頭，然后選擇或從列表中取消選擇列名。

改變資源行大小

你可以用較大的資源行（默認(rèn)），或小的資源行查看網(wǎng)絡(luò)表。點(diǎn)擊藍(lán)色的用小資源行切換按鈕，小行的資源在面板底部，查看小行。點(diǎn)擊該按鈕（現(xiàn)灰色的大資源行）再次查看大資源行。大型行啟用一些列，以顯示兩個(gè)文本字段：一次場(chǎng)和二次場(chǎng)（時(shí)間和等待時(shí)間，例如）。當(dāng)觀看小行只有主域顯示。

瀑布視圖

在網(wǎng)絡(luò)面板瀑布查看圖形花加載每個(gè)resource.From HTTP請(qǐng)求到接收到響應(yīng)的最后一個(gè)字節(jié)的開(kāi)始的時(shí)間。

每個(gè)資源加載時(shí)間被表示為一欄。這具有與每個(gè)資源顏色編碼的信息。每種顏色指定收到資源需要不同的步驟。Bar增長(zhǎng)較大的代表正在為trasmitted請(qǐng)求更多的數(shù)據(jù)。

該網(wǎng)絡(luò)的時(shí)間表一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)。

將鼠標(biāo)懸停在該欄本身會(huì)呈現(xiàn)完整的時(shí)序數(shù)據(jù)。這就是會(huì)呈現(xiàn)在時(shí)序的詳細(xì)信息選項(xiàng)卡給定資源的相同信息。

網(wǎng)絡(luò)定時(shí)信息披露上徘徊

你可以使在網(wǎng)絡(luò)設(shè)置，以查看時(shí)間表作為顏色編碼的由資源類(lèi)型。如果你做網(wǎng)絡(luò)定時(shí)信息仍然是通過(guò)提示訪(fǎng)問(wèn)。瀑布桿被顏色編碼，如下所示：

保存和復(fù)制網(wǎng)絡(luò)信息

右鍵單擊或Ctrl+單擊（僅限Mac）上下文菜單出現(xiàn)的幾個(gè)動(dòng)作網(wǎng)絡(luò)表內(nèi)。鼠標(biāo)點(diǎn)擊其中的一些動(dòng)作適用于資源區(qū)（如復(fù)制HTTP請(qǐng)求頭），而另一些適用于整個(gè)網(wǎng)絡(luò)的記錄（如保存網(wǎng)絡(luò)記錄作為一個(gè)HAR文件）。

下面的菜單操作應(yīng)用到選定的資源：

• 打開(kāi)鏈接在新標(biāo)簽頁(yè) - 在打開(kāi)新標(biāo)簽頁(yè)中的資源。您也可以雙擊網(wǎng)絡(luò)表中的資源名稱(chēng)。
• 復(fù)制鏈接地址 - 復(fù)制資源URL到系統(tǒng)剪貼板。
• 復(fù)制請(qǐng)求頭 - 復(fù)制HTTP請(qǐng)求頭到系統(tǒng)剪貼板。
• 復(fù)制響應(yīng)頭 - 復(fù)制HTTP響應(yīng)頭到系統(tǒng)剪貼板。
• 復(fù)制為卷曲 - 復(fù)制網(wǎng)絡(luò)請(qǐng)求作為一個(gè)cURL命令字符串到系統(tǒng)剪貼板。請(qǐng)參閱復(fù)制請(qǐng)求作為卷曲的命令。
• 重播XHR - 如果相關(guān)請(qǐng)求是一個(gè)XMLHttpRequest，重新發(fā)送原始XHR。

復(fù)制請(qǐng)求作為卷曲的命令

cURL是一個(gè)命令行工具，用于對(duì)HTTP事務(wù)。網(wǎng)絡(luò)面板的復(fù)制為卷曲命令創(chuàng)建一個(gè)HTTP請(qǐng)求（包括HTTP頭，SSL證書(shū)和查詢(xún)字符串參數(shù)），并將其副本卷曲命令字符串復(fù)制到剪貼板。然后，您可以粘貼串入一個(gè)終端窗口（與卷曲的系統(tǒng)上）執(zhí)行相同的請(qǐng)求。

下面是來(lái)自谷歌新聞主頁(yè)上XHR請(qǐng)求采取的一個(gè)例子cURL命令行字符串。

curl 'http://news.google.com/news/xhrd=us' -H 'Accept-Encoding: gzip,deflate,:sdch' -H 'Host: news.google.com' -H 'Accept-Language: en-US,en;q=0.8' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1510.0 Safari/537.36' -H 'Accept: */*' -H 'Referer: http://news.google.com/nwshp?hl=en&tab=wn' -H 'Cookie: NID=67=eruHSUtoIQA-HldQn7U7G5meGuvZOcY32ixQktdgU1qSz7StUDIjC_Knit2xEcWRa-e8CuvmADminmn6h2_IRpk9rWgWMdRj4np3-DM_ssgfeshItriiKsiEXJVfra4n; PREF=ID=a38f960566524d92:U=af866b8c07132db6:FF=0:TM=1369068317:LM=1369068321:S=vVkfXySFmOcAom1K' -H 'Connection: keep-alive' --compressed

節(jié)省網(wǎng)絡(luò)數(shù)據(jù)

您可以從網(wǎng)絡(luò)記錄作為HAR（HTTP Archive）文件保存數(shù)據(jù)，或記錄復(fù)制為HAR數(shù)據(jù)結(jié)構(gòu)到剪貼板。一個(gè)HAR文件包含一個(gè)JSON數(shù)據(jù)結(jié)構(gòu)，描述了網(wǎng)絡(luò)的“瀑布”。一些第三方工具可以從HAR文件中的數(shù)據(jù)重建網(wǎng)絡(luò)的瀑布。

要保存記錄：

1. 右鍵+單擊或控制+單擊網(wǎng)絡(luò)表。
2. 在出現(xiàn)的快捷菜單中，選擇下列操作之一：
   • 所有的復(fù)制為HAR - 復(fù)制網(wǎng)絡(luò)記錄在HAR格式的系統(tǒng)剪貼板。
   • 另存為HAR與內(nèi)容 - 保存所有網(wǎng)絡(luò)數(shù)據(jù)到HAR文件以及每個(gè)頁(yè)面資源。二進(jìn)制資源，包括圖像，編碼為Base64編碼的文本。

欲了解更多信息，Web性能電動(dòng)工具：HTTP存檔（HAR）。

網(wǎng)絡(luò)資源的詳細(xì)信息

當(dāng)您單擊網(wǎng)絡(luò)表的資源名稱(chēng)出現(xiàn)一個(gè)選項(xiàng)卡式窗口，其中包含以下其他詳細(xì)信息：

• HTTP請(qǐng)求和響應(yīng)頭
• 資源預(yù)覽
• HTTP響應(yīng)
• Cookie的名稱(chēng)和值
• WebSocket的消息
• 資源網(wǎng)絡(luò)定時(shí)

HTTP頭

標(biāo)題標(biāo)簽顯示資源的請(qǐng)求的URL，HTTP方法和響應(yīng)狀態(tài)代碼。此外，它列出了HTTP響應(yīng)和請(qǐng)求頭和它們的值，以及任何查詢(xún)字符串參數(shù)。您可以查看HTTP標(biāo)頭解析和格式化，或者點(diǎn)擊查看解析/查看源代碼切換按鈕，分別毗鄰每個(gè)標(biāo)題的一節(jié)他們的源代碼形式。您還可以查看自己的解碼或URL編碼形式的參數(shù)值，點(diǎn)擊查看解碼/查看URL編碼切換按鈕旁邊的每個(gè)查詢(xún)字符串部分。

您也可以請(qǐng)求和響應(yīng)頭復(fù)制到剪貼板。

資源預(yù)覽

預(yù)覽選項(xiàng)卡顯示資源，當(dāng)可用的預(yù)覽。預(yù)覽當(dāng)前顯示圖像和JSON資源，如下所示。

您可以查看該資源的上Responsetab格式化響應(yīng)。

HTTP響應(yīng)

響應(yīng)選項(xiàng)卡包含資源的未格式化的內(nèi)容。下面是被返回作為用于請(qǐng)求的響應(yīng)，一個(gè)JSON數(shù)據(jù)結(jié)構(gòu)的屏幕截圖。

您還可以查看一些資源類(lèi)型格式預(yù)覽，包括JSON數(shù)據(jù)結(jié)構(gòu)和圖像。

Cookies

Cookies標(biāo)簽顯示所有在theresource的HTTP請(qǐng)求和響應(yīng)頭發(fā)送的cookie的表。您也可以清除所有的cookies。

Cookie表包含以下幾列：

WebSocket 的框架

幀標(biāo)簽顯示發(fā)送或接收通過(guò) WebSocket 連接的消息。此選項(xiàng)卡才可見(jiàn)當(dāng)選定的資源發(fā)起的WebSocket連接。該表包含以下幾列：

消息是彩色編碼根據(jù)其類(lèi)型。即將離任的文本信息顏色編碼淺綠色;收到的短信均為白色：

WebSocket的操作碼是淺黃色：

錯(cuò)誤是淺紅色。

關(guān)于當(dāng)前實(shí)施的注意事項(xiàng)：

• 要刷新的幀數(shù)表中的新郵件到達(dá)后，點(diǎn)擊左側(cè)的資源名稱(chēng)。
• 只有最后100的WebSocket消息由幀表保留。

資源網(wǎng)絡(luò)定時(shí)

定時(shí)圖表選項(xiàng)卡上度過(guò)涉及加載資源的各種網(wǎng)絡(luò)階段的時(shí)間。這顯示了相同的數(shù)據(jù)，當(dāng)您在在瀑布查看資源吧懸停。