摘要:通俗來講就是是頁面白屏的時間頁面所有的資源圖片,音頻,視頻等加載完成的時間。深入分析頁面的性能粗略掃一眼請求的時間,都是清一色幾十毫秒。
一般情況下,如果網頁加載時間超過5s,用戶就會感覺頁面比較卡,用戶體驗相當差,用戶可能會直接走人,所以加載的時間對于一個網站來說還是相當重要的。那做項目的時候怎樣分析頁面的加載速度慢呢?
首先我們要知道影響頁面加載的因素JS性能太差,阻塞頁面
瀏覽器解析過程中,遇到
查看頁面加載時間以chrome為例,打開頁面后,按F12或者點擊右鍵菜單里的檢查,就進入了開發者模式,開發者模式里面有很多功能,跟頁面加載時間相關的就是Network標簽。如下圖所示:
依次是17個請求;622K數據;頁面最后一個請求截止用時1.7s;DOM內容加載并解析完成用時1.48;頁面所有的資源(圖片,音頻,視頻等)加載完成用時1.58s
Finish:頁面最后一個請求截止的時間,如果頁面加載完后,觸發了ajax請求,那么該時間會加長。
DOMContentLoaded:DOM內容加載并解析完成的時間。(通俗來講就是是頁面白屏的時間)
load:頁面所有的資源(圖片,音頻,視頻等)加載完成的時間。(頁面加載完成,瀏覽器不再轉圈的時間,頁面上所有的資源(圖片,音頻,視頻等)被加載以后才會觸發load事件,簡單來說,頁面的load事件會在DOMContentLoaded被觸發之后才觸發。)
一般情況下html頁面在解析渲染的過程中,會有大量的請求,比如外鏈的css、js、圖片等等,這些資源都需要瀏覽器去重新發起http請求。這些請求其實都是類似的一個過程。
首先我們打開F12開發都工具的Network標簽,看看單個請求的各個時間段(不同的時段分別有不同的顏色區分),將鼠標懸停在waterfall字段就可以看到這個請求具體的耗時,如下圖所示:
Queueing深入分析頁面的性能
請求排隊的時間。就是瀏覽器與同一個域名建立的TCP連接數是有限制的,比方chrome設置的6個,如果說同一時間,發起的同一域名的請求超過了6個,這時候就需要排隊了,也就是這個Queueing時間。
Stalled
就是瀏覽器得到要發出請求的指令到請求可以發出的等待時間,一般是代理協商、以及等待可復用的TCP連接釋放的時間,不包括DNS查詢、建立TCP連接等時間等。
Stalled/Blocking
請求能夠被發出去前的等等時間。包含了用于處理代理的時間。另外,如果有已經建立好的連接,那么這個時間還包括等待已建立連接被復用的時間,這個遵循瀏覽器對同一源最大TCP連接的規則。
Proxy Negotiation
處理代理的時間。
DNS Lookup
DNS查詢的時間,頁面內任何新的域名都需要走一遍 完整的DNS查詢過程,已經查詢過的則走緩存。
Initial Connection / Connecting
建立TCP連接的時間,包括TCP的三次握手和SSL的認證。
SSL
完成ssl認證的時間
Request sent/sending
請求第一個字節發出前到最后一個字節發出后的時間,也就是上傳時間。
Waiting
請求發出后,到收到響應的第一個字節所花費的時間。
Content Download
收到響應的第一個字節,到接受完最后一個字節的時間,就是下載時間。
粗略掃一眼請求的時間,都是清一色幾十毫秒。這時候我們可以在Network里瀑布般的Timeline里很直觀的看出來請求的耗時情況。
在timeline里,每一條線代表一個TCP的連接,每一種顏色代表請求一個時間段,每條線的顏色一直循環變化,從灰色到深綠最后藍色,然后又變灰色,說明瀏覽器建立的TCP連接一直在循環復用,這樣就省去了三次握手的時間。
有一條藍色豎線和紅色豎線,藍色豎線表示觸發DomContentLoad事件觸發時間,紅色表示Load事件觸發,如下圖:
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116151.html
摘要:通俗來講就是是頁面白屏的時間頁面所有的資源圖片,音頻,視頻等加載完成的時間。深入分析頁面的性能粗略掃一眼請求的時間,都是清一色幾十毫秒。 一般情況下,如果網頁加載時間超過5s,用戶就會感覺頁面比較卡,用戶體驗相當差,用戶可能會直接走人,所以加載的時間對于一個網站來說還是相當重要的。那做項目的時候怎樣分析頁面的加載速度慢呢? 首先我們要知道影響頁面加載的因素 JS性能太差,阻塞頁面 瀏覽...
摘要:通俗來講就是是頁面白屏的時間頁面所有的資源圖片,音頻,視頻等加載完成的時間。深入分析頁面的性能粗略掃一眼請求的時間,都是清一色幾十毫秒。 一般情況下,如果網頁加載時間超過5s,用戶就會感覺頁面比較卡,用戶體驗相當差,用戶可能會直接走人,所以加載的時間對于一個網站來說還是相當重要的。那做項目的時候怎樣分析頁面的加載速度慢呢? 首先我們要知道影響頁面加載的因素 JS性能太差,阻塞頁面 瀏覽...
摘要:二模塊化誤區加快加載和執行的速度,一直是前端優化的一個熱點。結果文件減少,也達到了預期的效果。避免不必要的延遲。最后再根據文件的功能類型,來決定是放在頁面的頭部還是尾部。 注:本文是純技術探討文,無圖無笑點,希望您喜歡 一.前言 軟件行業極其缺乏前端人才這是圈內的共識了,某種程度上講,同等水平前端的工資都要比后端高上不少,而圈內的另一項共識則是——網頁是公司的臉面! 幾年前,谷歌的一項...
摘要:大多數情況下,對一個直接量和一個局部變量數據訪問的性能差異是微不足道的。 前端性能優化之 JavaScript 前言 本文為 《高性能 JavaScript》 讀書筆記,是利用中午休息時間、下班時間以及周末整理出來的,此書雖有點老舊,但談論的性能優化話題是每位同學必須理解和掌握的,業務響應速度直接影響用戶體驗。 一、加載和運行 大多數瀏覽器使用單進程處理 UI 更新和 JavaScri...
閱讀 3870·2021-09-10 11:22
閱讀 2325·2021-09-03 10:30
閱讀 3660·2019-08-30 15:55
閱讀 1872·2019-08-30 15:44
閱讀 840·2019-08-30 15:44
閱讀 581·2019-08-30 14:04
閱讀 3041·2019-08-29 17:18
閱讀 1262·2019-08-29 15:04