前端性能優(yōu)化之白屏時間

定場詩

曲木為直終必彎，養(yǎng)狼當犬看家難；
墨染鸕鶿黑不久，粉刷烏鴉白不堅。
蜜餞黃蓮終需苦，強摘瓜果不能甜；
好事總得善人做，哪有凡人做神仙。

前言

該篇文章會為您分享在前端性能優(yōu)化中非常重要的一環(huán)-白屏時間，將從白屏時間的概念、重要性以及白屏的過程一一進行闡述，同時提供性能優(yōu)化的策略與實踐。

一、概念

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

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

二、白屏時間的重要性

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

打開一個頁面就像你的女票召喚你一樣，你出現(xiàn)的越迅速，女票肯定會愈加欣喜！反之，你千呼萬喚始出來，那么你的女票很可能又要拋棄你了(為什么要對你說又呢? ...)

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

讓我們一起來揭秘：從打開一個頁面，到頁面的畫面展示經(jīng)歷了怎樣的過程！

1. DNS Lookup

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

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

Tips:?通常在整個加載頁面的過程中，瀏覽器會多次進行DNS Lookup，包括頁面本身的域名查詢以及在解析HTML頁面時加載的JS、CSS、Image、Video等資源產(chǎn)生的域名查詢。

2. 建立TCP請求連接

瀏覽器和服務端TCP請求建立的過程，是基于TCP/IP，該協(xié)議由網(wǎng)絡層的IP和傳輸層的TCP組成。IP是每一臺互聯(lián)網(wǎng)設備在互聯(lián)網(wǎng)中的唯一地址。

TCP通過三次握手建立連接，并提供可靠的數(shù)據(jù)傳輸服務。

3. 服務端請求處理響應

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

Web服務器根據(jù)請求類型的不同，進行相應的處理。靜態(tài)資源如圖片、CSS文件、靜態(tài)HTML直接進行響應；如其他注冊的請求轉發(fā)給相應的應用服務器，進行如數(shù)據(jù)處理、緩存中取數(shù)據(jù)，將數(shù)據(jù)按照約定好的格式響應給瀏覽器。

在大型應用中，通常為分布式服務架構，應用服務器的處理有可能經(jīng)過很多個系統(tǒng)的中間件，最終獲取到需要的數(shù)據(jù)

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

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

• a. 如果是Gzip包，則先解壓為HTML

• b. 解析HTML的頭部代碼，下載頭部代碼中的樣式資源文件或腳本資源文件

• c. 解析HTML代碼和樣式文件代碼，構建HTML的DOM樹以及與CSS相關的CSSOM樹

• d. 通過遍歷DOM樹和CSSOM樹，瀏覽器依次計算每個節(jié)點的大小、坐標、顏色等樣式，構造渲染樹

• e. 根據(jù)渲染樹完成繪制過程

瀏覽器下載HTML后，首先解析頭部代碼，進行樣式表下載，然后繼續(xù)向下解析HTML代碼，構建DOM樹，同時進行樣式下載。當DOM樹構建完成后，立即開始構造CSSOM樹。理想情況下，樣式表下載速度夠快，DOM樹和CSSOM樹進入一個并行的過程，當兩棵樹構建完畢，構建渲染樹，然后進行繪制。

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

• 當解析HTML時遇到內(nèi)聯(lián)JS代碼，會阻塞DOM樹的構建

• 特別悲慘的情況：?當CSS樣式文件沒有下載完成時，瀏覽器解析HTML遇到了內(nèi)聯(lián)JS代碼，此時?。。「鶕?jù)瀏覽器的安全解析策略，瀏覽器暫停JS腳本執(zhí)行，暫停HTML解析。直到CSS文件下載完成，完成CSSOM樹構建，重新恢復原來的解析。

  一定要合理放置JS代碼?。?！

四、白屏-性能優(yōu)化

至此，我們已經(jīng)了解了從瀏覽器在打開一個鏈接開始，到屏幕展示的過程-白屏時間的歷程，那這對每個環(huán)節(jié)中發(fā)生的事情，我們可以有針對性的進行相關的優(yōu)化。

1. DNS解析優(yōu)化

針對DNS Lookup環(huán)節(jié)，我們可以針對性的進行DNS解析優(yōu)化。

• DNS緩存優(yōu)化

• DNS預加載策略

• 穩(wěn)定可靠的DNS服務器

2. TCP網(wǎng)絡鏈路優(yōu)化

針對網(wǎng)絡鏈路的優(yōu)化，好像除了花錢沒有什么更好的方式！

3. 服務端處理優(yōu)化

服務端的處理優(yōu)化，是一個非常龐大的話題，會涉及到如Redis緩存、數(shù)據(jù)庫存儲優(yōu)化或是系統(tǒng)內(nèi)的各種中間件以及Gzip壓縮等...

4. 瀏覽器下載、解析、渲染頁面優(yōu)化

根據(jù)瀏覽器對頁面的下載、解析、渲染過程，可以考慮一下的優(yōu)化處理：

• 盡可能的精簡HTML的代碼和結構

• 盡可能的優(yōu)化CSS文件和結構

• 一定要合理的放置JS代碼，盡量不要使用內(nèi)聯(lián)的JS代碼

聲明

本文為胡哥拜讀周濤明、張榮華、張新兵幾位大佬所著《大型網(wǎng)站性能優(yōu)化實戰(zhàn)》一書并結合自身經(jīng)驗所得，愿對諸位小伙伴有所幫助。手動微笑.gif

最后

點個在看支持我吧，轉發(fā)就更好了