前端性能優化之白屏時間

定場詩

曲木爲直終必彎，養狼當犬看家難；
墨染鸕鶿黑不久，粉刷烏鴉白不天。
蜜餞黃蓮終需苦，強摘瓜果不能甜；
好事總得善人作，哪有凡人作神仙。複製代碼

前言

該篇文章會爲您分享在前端性能優化中很是重要的一環-白屏時間，將從白屏時間的概念、重要性以及白屏的過程一一進行闡述，同時提供性能優化的策略與實踐。

1、概念

白屏時間：即用戶點擊一個連接或打開瀏覽器輸入URL地址後，從屏幕空白到顯示第一個畫面的時間。

白屏時間的長短將直接影響用戶對該網站的第一印象。

2、白屏時間的重要性

當用戶點開一個連接或者是直接在瀏覽器中輸入URL開始進行訪問時，就開始等待頁面的展現。頁面渲染的時間越短，用戶等待的時間就越短，用戶感知到頁面的速度就越快。這樣能夠極大的提高用戶的體驗，減小用戶的跳出，提高頁面的留存率。

打開一個頁面就像你的女票召喚你同樣，你出現的越迅速，女票確定會越發欣喜！反之，你千呼萬喚始出來，那麼你的女票極可能又要拋棄你了(爲何要對你說又呢? ...)

3、白屏是一個怎樣的過程呢？

讓咱們一塊兒來揭祕：從打開一個頁面，到頁面的畫面展現經歷了怎樣的過程！

1. DNS Lookup

DNS Lookup 即瀏覽器從DNS服務器中進行域名查詢。

瀏覽器會先對頁面進行域名解析，獲取到服務器的IP地址後，進而和服務器進行通訊。

Tips: 一般在整個加載頁面的過程當中，瀏覽器會屢次進行DNS Lookup，包括頁面自己的域名查詢以及在解析HTML頁面時加載的JS、CSS、Image、Video等資源產生的域名查詢。

2. 創建TCP請求鏈接

瀏覽器和服務端TCP請求創建的過程，是基於TCP/IP，該協議由網絡層的IP和傳輸層的TCP組成。IP是每一臺互聯網設備在互聯網中的惟一地址。

TCP經過三次握手創建鏈接，並提供可靠的數據傳輸服務。

3. 服務端請求處理響應

在TCP鏈接創建後，Web服務器接受請求，開始進行處理，同時瀏覽器端開始等待服務器的處理響應。

Web服務器根據請求類型的不一樣，進行相應的處理。靜態資源如圖片、CSS文件、靜態HTML直接進行響應；如其餘註冊的請求轉發給相應的應用服務器，進行如數據處理、緩存中取數據，將數據按照約定好的格式響應給瀏覽器。

在大型應用中，一般爲分佈式服務架構，應用服務器的處理有可能通過不少個系統的中間件，最終獲取到須要的數據

4. 客戶端下載、解析、渲染顯示頁面

在服務器返回數據後，客戶端瀏覽器接收數據，進行HTML下載、解析、渲染顯示。

• a. 若是是Gzip包，則先解壓爲HTML
• b. 解析HTML的頭部代碼，下載頭部代碼中的樣式資源文件或腳本資源文件
• c. 解析HTML代碼和樣式文件代碼，構建HTML的DOM樹以及與CSS相關的CSSOM樹
• d. 經過遍歷DOM樹和CSSOM樹，瀏覽器依次計算每一個節點的大小、座標、顏色等樣式，構造渲染樹
• e. 根據渲染樹完成繪製過程

瀏覽器下載HTML後，首先解析頭部代碼，進行樣式表下載，而後繼續向下解析HTML代碼，構建DOM樹，同時進行樣式下載。當DOM樹構建完成後，當即開始構造CSSOM樹。理想狀況下，樣式表下載速度夠快，DOM樹和CSSOM樹進入一個並行的過程，當兩棵樹構建完畢，構建渲染樹，而後進行繪製。

Tips:瀏覽器安全解析策略對解析HTML形成的影響：

• 當解析HTML時遇到內聯JS代碼，會阻塞DOM樹的構建
• 特別悲慘的狀況： 當CSS樣式文件沒有下載完成時，瀏覽器解析HTML遇到了內聯JS代碼，此時！！！根據瀏覽器的安全解析策略，瀏覽器暫停JS腳本執行，暫停HTML解析。直到CSS文件下載完成，完成CSSOM樹構建，從新恢復原來的解析。

  必定要合理放置JS代碼！！！

4、白屏-性能優化

至此，咱們已經瞭解了從瀏覽器在打開一個連接開始，到屏幕展現的過程-白屏時間的歷程，那這對每一個環節中發生的事情，咱們能夠有針對性的進行相關的優化。

1. DNS解析優化

針對DNS Lookup環節，咱們能夠針對性的進行DNS解析優化。

• DNS緩存優化
• DNS預加載策略
• 穩定可靠的DNS服務器

2. TCP網絡鏈路優化

針對網絡鏈路的優化，好像除了花錢沒有什麼更好的方式！

3. 服務端處理優化

服務端的處理優化，是一個很是龐大的話題，會涉及到如Redis緩存、數據庫存儲優化或是系統內的各類中間件以及Gzip壓縮等...

4. 瀏覽器下載、解析、渲染頁面優化

根據瀏覽器對頁面的下載、解析、渲染過程，能夠考慮一下的優化處理：

• 儘量的精簡HTML的代碼和結構
• 儘量的優化CSS文件和結構
• 必定要合理的放置JS代碼，儘可能不要使用內聯的JS代碼

聲明

本文爲胡哥拜讀周濤明、張榮華、張新兵幾位大佬所著《大型網站性能優化實戰》一書並結合自身經驗所得，願對諸位小夥伴有所幫助。手動微笑.gif

後記

以上就是胡哥今天給你們分享的內容，喜歡的小夥伴記得收藏、轉發、點擊右下角按鈕在看，推薦給更多小夥伴呦，歡迎多多留言交流...

胡哥有話說，一個有技術，有情懷的胡哥！京東開放平臺首席前端攻城獅。與你一塊兒聊聊大前端，分享前端系統架構，框架實現原理，最新最高效的技術實踐！

長按掃碼關注，更帥更漂亮呦！關注胡哥有話說公衆號，可與胡哥繼續深刻交流呦！