首屏加載速度影響著用戶對整個網站的第一體驗尤為關鍵。那么如果才能夠優(yōu)化首次加載時的白屏時間？
上一篇文章簡單介紹了在瀏覽器里，從輸入 URL 到頁面展示的過程∠臃停現在我們將整個過程劃分為三個階段:
1.從請求發(fā)出后到文檔提交階段，這個階段中用戶看到的還是跳轉前的上一個頁面掺炭。
2.文檔提交以后辫诅，渲染進程創(chuàng)建一個空白頁面，并等待css涧狮、javascript的加載泥栖，生成CSSOM和DOM，然后構建布局樹渲染頁面勋篓。
3.頁面渲染完成以后進入頁面繪制階段。
影響第一個階段的主要因素是網絡以及服務器魏割。影響第三個階段主要因素是瀏覽器的性能已經用戶的主機性能譬嚣。
這里我們主要分析第二個階段。這個階段如果處理的不好就會存在過長的白屏時間嚴重影響體驗钞它。我們再次分解第二個階段：
- 解析html生成DOM
- 下載css
- 下載javascript
- 生成CSSOM
- 執(zhí)行javascript
- 生成布局樹
- 渲染頁面
在這其中下載javascript以及執(zhí)行javascript會阻塞DOM樹的構建拜银，下載css雖然不會直接阻塞DOM樹的構建但是JavaScript執(zhí)行需要等css下載完成以后，因此也可能阻塞DOM樹的構建遭垛。
由于css代碼不會阻塞DOM構建所有我們可以將其應該盡量靠前尼桶。
javascript代碼無論放在任何位置都會阻塞DOM樹的構建，我可以將不存在dom操作的JavaScript代碼放在css之前锯仪，使其不受css下載的影響泵督。將存在dom操作的JavaScript代碼放在盡量靠后的位置，使其可以操作dom的同時盡可能與css距離足夠遠盡可能減少受css下載影響的可能性庶喜。
因此我們可以通過以下幾種手段優(yōu)化首屏加載速度：
- 根據情況調整JavaScript代碼與css代碼的位置小腊。（包括內聯、外聯）
- 使用內聯JavaScript久窟、內聯css秩冈，是的DOM構建以及頁面渲染不需要等待外部資源的下載。
- 內聯并非所有情況都使用斥扛，通過壓縮入问、移除注釋、移除打印來較小JavaScript文件以及css文件的大小
- 使用async和defer標記script標簽實現JavaScript的異步執(zhí)行。
- 通過媒體查詢標記不同用途的css文件芬失，使得某些css文件只有在特定情況下加載楣黍。
實際場景中還需要根據情況進行分析，找出影響頁面首屏速度關鍵點麸折。例如針對單頁面應用使用服務端渲染首屏锡凝、使用瀏覽器的強緩存與協商緩存。
