首屏加載速度影響著用戶對整個網(wǎng)站的第一體驗尤為關(guān)鍵。那么如果才能夠優(yōu)化首次加載時的白屏?xí)r間？
上一篇文章簡單介紹了在瀏覽器里，從輸入 URL 到頁面展示的過程?，F(xiàn)在我們將整個過程劃分為三個階段:
1.從請求發(fā)出后到文檔提交階段，這個階段中用戶看到的還是跳轉(zhuǎn)前的上一個頁面。
2.文檔提交以后，渲染進程創(chuàng)建一個空白頁面，并等待css、javascript的加載，生成CSSOM和DOM，然后構(gòu)建布局樹渲染頁面。
3.頁面渲染完成以后進入頁面繪制階段。
影響第一個階段的主要因素是網(wǎng)絡(luò)以及服務(wù)器。影響第三個階段主要因素是瀏覽器的性能已經(jīng)用戶的主機性能。
這里我們主要分析第二個階段。這個階段如果處理的不好就會存在過長的白屏?xí)r間嚴(yán)重影響體驗。我們再次分解第二個階段：
- 解析html生成DOM
- 下載css
- 下載javascript
- 生成CSSOM
- 執(zhí)行javascript
- 生成布局樹
- 渲染頁面
在這其中下載javascript以及執(zhí)行javascript會阻塞DOM樹的構(gòu)建，下載css雖然不會直接阻塞DOM樹的構(gòu)建但是JavaScript執(zhí)行需要等css下載完成以后，因此也可能阻塞DOM樹的構(gòu)建。
由于css代碼不會阻塞DOM構(gòu)建所有我們可以將其應(yīng)該盡量靠前。
javascript代碼無論放在任何位置都會阻塞DOM樹的構(gòu)建，我可以將不存在dom操作的JavaScript代碼放在css之前，使其不受css下載的影響。將存在dom操作的JavaScript代碼放在盡量靠后的位置，使其可以操作dom的同時盡可能與css距離足夠遠盡可能減少受css下載影響的可能性。
因此我們可以通過以下幾種手段優(yōu)化首屏加載速度：
- 根據(jù)情況調(diào)整JavaScript代碼與css代碼的位置。（包括內(nèi)聯(lián)、外聯(lián)）
- 使用內(nèi)聯(lián)JavaScript、內(nèi)聯(lián)css，是的DOM構(gòu)建以及頁面渲染不需要等待外部資源的下載。
- 內(nèi)聯(lián)并非所有情況都使用，通過壓縮、移除注釋、移除打印來較小JavaScript文件以及css文件的大小
- 使用async和defer標(biāo)記script標(biāo)簽實現(xiàn)JavaScript的異步執(zhí)行。
- 通過媒體查詢標(biāo)記不同用途的css文件，使得某些css文件只有在特定情況下加載。
實際場景中還需要根據(jù)情況進行分析，找出影響頁面首屏速度關(guān)鍵點。例如針對單頁面應(yīng)用使用服務(wù)端渲染首屏、使用瀏覽器的強緩存與協(xié)商緩存。
