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

2018-03-01 18:50 更新

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

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

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

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

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

resource-timing-overview.png

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

試試這個:打開 JavaScript 控制臺當(dāng)前頁面,輸入以下的提示,并回車:

window.performance.getEntries()[0]

試試這個:打開 JavaScript 控制臺當(dāng)前頁面,輸入以下的提示,并回車:

getentries.png

每個時間戳是微秒,即ResolutionTime規(guī)范。此 API 可 inChrome 作為window.performance.now()方法。

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

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

network-overview.png

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

  • 未在下面列出的所有列在默認情況下可見;您可以輕松地顯示或隱藏列。
  • 某些列包含主字段和次級領(lǐng)域(例如:時間和等待時間)。當(dāng)觀看網(wǎng)絡(luò)表的大資源行這兩個領(lǐng)域都顯示;使用小的資源行時只有主域顯示。
  • 你可以通過單擊列標題由列的值排序表。在時間軸中列的行為有所不同:單擊其列標題顯示的其他排序字段的菜單。見瀑布景色,排序和過濾的更多信息。
 
名稱和路徑該資源的名稱和URL路徑分別
方法用于請求的HTTP方法。例如:GET或POST
狀態(tài)和文本HTTP狀態(tài)代碼和文本消息。
域名資源請求的域名。
類型MIME類型所請求資源的。
啟動器的對象或過程發(fā)起請求。它可以有以下值之一:
 
分析器Chrome的HTML解析器發(fā)出請求
重定向一個HTTP重定向發(fā)起請求。
腳本腳本發(fā)起請求。
其他一些其他過程或動作發(fā)起的請求,例如用戶通過鏈接導(dǎo)航到網(wǎng)頁,或通過在地址欄中輸入URL。
 
Cookies在請求傳送 Cookies 數(shù)目。這些對應(yīng)于Cookies標簽查看細節(jié)對于給定的資源時顯示的Cookies。
Set-Cookies在HTTP請求中設(shè)置的Cookie的數(shù)目。
大小和內(nèi)容大小是響應(yīng)頭(通常為幾百個字節(jié))加上響應(yīng)主體的組合大小,作為交付服務(wù)器。內(nèi)容是資源的解碼的內(nèi)容的大小。如果資源是從瀏覽器的緩存,而不是在網(wǎng)絡(luò)上加載,這個字段包含文本(從緩存)。
時間和等待時間時間是總的持續(xù)時間,從請求到收到響應(yīng)中的最后一個字節(jié)的開始。延遲是加載的第一個字節(jié)中的響應(yīng)的時間
時間表時間軸欄顯示所有的網(wǎng)絡(luò)請求的視覺瀑布。單擊該列的標題揭示了額外的排序字段的菜單。

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

默認情況下,當(dāng)前的網(wǎng)絡(luò)日志記錄時,會導(dǎo)航到另一個頁面,或者刷新當(dāng)前頁面丟棄。要保留日志記錄在這些情況下,單擊黑色 recording-off.png保留日志在導(dǎo)航鍵不要在導(dǎo)航在網(wǎng)絡(luò)面板底部保存日志;新記錄被追加到表的底部。再次單擊該按鈕(紅色recording-on.png保留在導(dǎo)航資源)來禁用日志保存。

排序和過濾

默認情況下,在網(wǎng)絡(luò)表的資源是由每個請求(在網(wǎng)絡(luò)“瀑布”)的開始時間進行排序。您可以通過單擊列標題排序表由另一列值。再次單擊該標題更改排序順序(升序或降序)。

sorting.png

時間軸列是別人的獨特之處,點擊后,會顯示額外的排序字段的菜單。

timeline-column.png

該菜單包含以下排序選項:

  • 時間軸 - 排序由每個網(wǎng)絡(luò)請求的開始時間。這是默認的排序,并且是相同的開始時間選項排序)。
  • 開始時間 - 由每個網(wǎng)絡(luò)請求的開始時間排序(同樣如由時間軸選項排序)。
  • 響應(yīng)時間 - 通過排序每個請求的響應(yīng)時間。
  • 結(jié)束時間 - 通過排序時,每個請求完成的時間。
  • 持續(xù)時間 - 排序由每個請求的總時間。
  • 延遲 - 排序由請求的開始和響應(yīng)的開始之間的時間(也被稱為“時間到第一個字節(jié)”)。

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

filter-type.png

高級過濾

除了資源類型過濾,可以過濾查詢縮小資源。在過濾器輸入字段200:例如,要查找其中有 200 狀態(tài)碼的所有資源,你可以輸入查詢的StatusCode。

network-advanced-filter.png

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

可用過濾器類型:

 
從資源的URL的域部分。例如www.google-analytics.com。
具有響應(yīng)頭檢查資源都有一個響應(yīng)頭,無論該值的。例如訪問 - 控制 - 允許原產(chǎn)地。
顯示在當(dāng)前時間點運行的請求。當(dāng)前可用值:運行
降幅高于示出了具有傳輸大小比規(guī)定量更大的請求。假設(shè)單位以字節(jié)為單位,但千字節(jié)(K)和兆(M)的單位也被允許:例如:較大比:50,降幅高于:150K,降幅高于:20M
方法HTTP方法使用。例如GET。
MIME類型也被稱為內(nèi)容類型 - 的標識符的資源的類型。例如text / html的。
方案在URL方案部分。例如HTTPS。
設(shè)置cookie的名稱Cookie的名稱服務(wù)器設(shè)置。例如的loggedIn(假設(shè)類似的loggedIn = TRUE一個cookie)。
設(shè)置cookie的值該cookie由服務(wù)器設(shè)置的值。例如真正的(假定喜歡的loggedIn = TRUE一個cookie)。
設(shè)置Cookie域cookie的域名服務(wù)器設(shè)置為。例如foo.com(假設(shè)類似的loggedIn =cookie真;域= foo.com;路徑= /;過期=周三,2021年1月13日22時23分01秒格林尼治標準??時間;僅Http)。
狀態(tài)代碼在HTTP響應(yīng)中的狀態(tài)代碼。例如200

使用上面列表中顯示的查詢,構(gòu)建它的格式為:<過濾器類型>:<說明>。你幾乎總是要使用自動完成建議可確保您的查詢有效。

添加和刪除表中的列

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

add-remove-columns.png

改變資源行大小

你可以用較大的資源行(默認),或小的資源行查看網(wǎng)絡(luò)表。點擊藍色的small-resource-rows.png用小資源行切換按鈕,小行的資源在面板底部,查看小行。點擊該按鈕(現(xiàn)灰色的large-resource-rows.png大資源行)再次查看大資源行。大型行啟用一些列,以顯示兩個文本字段:一次場和二次場(時間和等待時間,例如)。當(dāng)觀看小行只有主域顯示。

small-rows.png

瀑布視圖

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

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

network-timeline.png該網(wǎng)絡(luò)的時間表一個簡單的網(wǎng)頁。

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

timeline-view-hover.png

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

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

 文件
 樣式表
 圖片
 腳本
 XHR
 字體
 其他

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

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

right-click.png

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

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

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

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

下面是來自谷歌新聞主頁上XHR請求采取的一個例子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)到剪貼板。一個HAR文件包含一個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文件以及每個頁面資源。二進制資源,包括圖像,編碼為Base64編碼的文本。

欲了解更多信息,Web性能電動工具:HTTP存檔(HAR)

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

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

HTTP頭

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

network-headers.png

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

資源預(yù)覽

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

resource-preview-json.png

network-image-preview.png

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

HTTP響應(yīng)

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

response.png

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

Cookies

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

s.png

Cookie表包含以下幾列:

 
Namecookie的名稱。
Value該cookie的值。
Domain該域的cookie屬于。
Path該URL路徑的cookie是從哪里來的。
Expires / Max-Agecookie的值屆滿或者max-age的性能。
Size以字節(jié)為餅干的大小。
HTTP這表明,該cookie應(yīng)僅由在HTTP請求的瀏覽器進行設(shè)置,并且不能用JavaScript訪問。
Secure此屬性的存在表明該cookie只應(yīng)通過安全連接被發(fā)送。

WebSocket 的框架

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

 
Data消息負載。如果消息是純文本,它顯示在這里。對于二進制操作碼,這個字段顯示操作碼的名稱和代碼。下面的操作碼的支持:
延續(xù)架
二元框架
連接關(guān)閉框架
平架
傍框架
Length以字節(jié)為單位的消息的有效載荷的長度
Time時間戳?xí)r創(chuàng)建的消息

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

websocket-text2.png

WebSocket的操作碼是淺黃色:

frames-opcode.png

錯誤是淺紅色。

關(guān)于當(dāng)前實施的注意事項:

  • 要刷新的幀數(shù)表中的新郵件到達后,點擊左側(cè)的資源名稱。
  • 只有最后100的WebSocket消息由幀表保留。

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

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

timing.png

 
Stalled/Blocking時間請求花在等待它可以被發(fā)送之前。這一次是包容的代理談判花費任何時間。此外,這一次將包括當(dāng)瀏覽器正在等待一個已經(jīng)建立的連接,成為可再利用,服從Chrome的最高每產(chǎn)地來源規(guī)則TCP連接。
Proxy Negotiation花費的時間與代理服務(wù)器的連接進行談判。
DNS Lookup花費的時間進行DNS查詢。頁面上的每一個新的領(lǐng)域,需要一個完整的往返做DNS查找。
Initial Connection / Connecting花費的時間來建立連接,包括TCP握手/重試和談判中的SSL。
SSL花費的時間完成SSL握手。
Request Sent / Sending花費的時間發(fā)出網(wǎng)絡(luò)請求。通常一毫秒的一小部分。
Waiting (TTFB)花費的時間等待的初始響應(yīng),也被稱為時間至第一字節(jié)。此時捕獲往返于除時間服務(wù)器的等待時間花費等待服務(wù)器提供的響應(yīng)。
Content Download / Downloading花費的時間接收響應(yīng)數(shù)據(jù)。
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號