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