前端性能優(yōu)化之白屏?xí)r間

定場詩

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

前言

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

一、概念

白屏?xí)r間：即用戶點(diǎn)擊一個(gè)鏈接或打開瀏覽器輸入U(xiǎn)RL地址后，從屏幕空白到顯示第一個(gè)畫面的時(shí)間。

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

二、白屏?xí)r間的重要性

當(dāng)用戶點(diǎn)開一個(gè)鏈接或者是直接在瀏覽器中輸入U(xiǎn)RL開始進(jìn)行訪問時(shí)，就開始等待頁面的展示。頁面渲染的時(shí)間越短，用戶等待的時(shí)間就越短，用戶感知到頁面的速度就越快。這樣可以極大的提升用戶的體驗(yàn)，減少用戶的跳出，提升頁面的留存率。

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

三、白屏是一個(gè)怎樣的過程呢？

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

1. DNS Lookup

DNS Lookup 即瀏覽器從DNS服務(wù)器中進(jìn)行域名查詢。

瀏覽器會(huì)先對頁面進(jìn)行域名解析，獲取到服務(wù)器的IP地址后，進(jìn)而和服務(wù)器進(jìn)行通信。

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

2. 建立TCP請求連接

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

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

3. 服務(wù)端請求處理響應(yīng)

在TCP連接建立后，Web服務(wù)器接受請求，開始進(jìn)行處理，同時(shí)瀏覽器端開始等待服務(wù)器的處理響應(yīng)。

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

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

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

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

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

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

• c. 解析HTML代碼和樣式文件代碼，構(gòu)建HTML的DOM樹以及與CSS相關(guān)的CSSOM樹

• d. 通過遍歷DOM樹和CSSOM樹，瀏覽器依次計(jì)算每個(gè)節(jié)點(diǎn)的大小、坐標(biāo)、顏色等樣式，構(gòu)造渲染樹

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

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

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

• 當(dāng)解析HTML時(shí)遇到內(nèi)聯(lián)JS代碼，會(huì)阻塞DOM樹的構(gòu)建

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

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

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

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

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

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

• DNS緩存優(yōu)化

• DNS預(yù)加載策略

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

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

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

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

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

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

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

• 盡可能的精簡HTML的代碼和結(jié)構(gòu)

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

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

聲明

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

最后

點(diǎn)個(gè)在看支持我吧，轉(zhuǎn)發(fā)就更好了