前端性能優化之白屏時間
- 2019 年 10 月 5 日
- 筆記
定場詩
曲木為直終必彎，養狼當犬看家難； 墨染鸕鶿黑不久，粉刷烏鴉白不堅。 蜜餞黃蓮終需苦，強摘瓜果不能甜； 好事總得善人做，哪有凡人做神仙。
前言
該篇文章會為您分享在前端性能優化中非常重要的一環-白屏時間，將從白屏時間的概念、重要性以及白屏的過程一一進行闡述，同時提供性能優化的策略與實踐。
一、概念
白屏時間：即用戶點擊一個鏈接或打開瀏覽器輸入URL地址後，從螢幕空白到顯示第一個畫面的時間。
白屏時間的長短將直接影響用戶對該網站的第一印象。
二、白屏時間的重要性
當用戶點開一個鏈接或者是直接在瀏覽器中輸入URL開始進行訪問時，就開始等待頁面的展示。頁面渲染的時間越短，用戶等待的時間就越短，用戶感知到頁面的速度就越快。這樣可以極大的提升用戶的體驗，減少用戶的跳出，提升頁面的留存率。
打開一個頁面就像你的女票召喚你一樣，你出現的越迅速，女票肯定會愈加欣喜！反之，你千呼萬喚始出來，那麼你的女票很可能又要拋棄你了(為什麼要對你說又呢? …)
三、白屏是一個怎樣的過程呢？
讓我們一起來揭秘：從打開一個頁面，到頁面的畫面展示經歷了怎樣的過程！
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程式碼！！！
四、白屏-性能優化
至此，我們已經了解了從瀏覽器在打開一個鏈接開始，到螢幕展示的過程-白屏時間的歷程，那這對每個環節中發生的事情，我們可以有針對性的進行相關的優化。
1. DNS解析優化
針對DNS Lookup環節，我們可以針對性的進行DNS解析優化。
- DNS快取優化
- DNS預載入策略
- 穩定可靠的DNS伺服器
2. TCP網路鏈路優化
針對網路鏈路的優化，好像除了花錢沒有什麼更好的方式！
3. 服務端處理優化
服務端的處理優化，是一個非常龐大的話題，會涉及到如Redis快取、資料庫存儲優化或是系統內的各種中間件以及Gzip壓縮等…
4. 瀏覽器下載、解析、渲染頁面優化
根據瀏覽器對頁面的下載、解析、渲染過程，可以考慮一下的優化處理：
- 儘可能的精簡HTML的程式碼和結構
- 儘可能的優化CSS文件和結構
- 一定要合理的放置JS程式碼，盡量不要使用內聯的JS程式碼
聲明
本文為胡哥拜讀周濤明、張榮華、張新兵幾位大佬所著《大型網站性能優化實戰》一書並結合自身經驗所得，願對諸位小夥伴有所幫助。手動微笑.gif
後記
以上就是胡哥今天給大家分享的內容，喜歡的小夥伴記得收藏、轉發、點擊右下角按鈕在看，推薦給更多小夥伴呦，歡迎多多留言交流…
胡哥有話說，一個有技術，有情懷的胡哥！京東開放平台首席前端攻城獅。與你一起聊聊大前端，分享前端系統架構，框架實現原理，最新最高效的技術實踐！
