同時，我們還應該避免在首次渲染的CSS樣式中使用@import指令，因為它只有在收到並解析完帶有@import規則的CSS資源之後，才會發現導入的 CSS 資源，這個時候就會重新請求，從而增加了關鍵渲染路徑的往返次數。
4、內聯CSS來提高渲染性能
到目前為止，我們已經做到了識別關鍵渲染資源，將非關鍵資源延遲加載或者不加載。那麼，減少關鍵路徑的往返次數是什麼意思？其實就是減少關鍵渲染資源從服務器端到客戶端的往返次數。比如，外鏈的JS和CSS文件以前CSS的@import，在頁面渲染的過程中，都會重新去服務器端請求。這其實，和我們常說的減少http請求量（合併http請求）類似，但是我麼從渲染路徑的角度來理解這樣一種性能的消耗。
根據這樣的邏輯，我們很容易就想到可以將渲染必備CSS內聯到HTML中，來減少渲染路徑的往返次數。
實際上不少的優秀網站都採用了在head內聯樣式的做法：Google，百度，淘寶，京東。
（百度和Google將樣式inline在head中）
關於內聯樣式還有更進一步的做法，在文章的一開始就提到，優化關鍵渲染路徑就是要優先顯示和用戶先關內容。
所以，我們可以考慮僅僅將當前屏幕展示的內容（above-the-fold，一屏）所需的CSS內聯到HTML的head中，然後採用異步的方式加載整個頁面所需要的完整CSS，以便用戶能夠更快的看到首屏出現的內容。（inlining-critical-css-for-better-web-performance）
5、一個神奇的數字14kb
在最開始我們提到，要減小關鍵資源的大小，那麼多小比較合適呢？（廢話，當然是越小越好）。
其實，有一個神奇的數字14kb，它是怎麼來？
HTTP的傳輸層協議是TCP，TCP協議有一個慢啟動的過程，即它在第一次傳遞數據時，只能同時傳遞14kb的數據塊，所以當數據超多14kb時，TCP協議傳遞數據實際是多次的往返（roundtrip）。如果能夠將渲染所需要的資源控制在14kb之內，那麼就能TCP協議啟動時，一次完成數據的傳遞。
其他Web資源和關鍵渲染路徑的關係
你一定會思考，除了HTML，JavaScript和CSS，Web頁面還包含許多其他的資源，比如：圖片，網絡字體（Icon Font），他們和關鍵渲染路徑的關係是什麼？
大家對圖片加載感受都應該大致一樣，它會在頁面加載過程中或完成後，逐步顯示，也就是說它不是阻塞渲染的資源，它的痛點主要在於質量和資源大小的權衡，以及請求數量帶來的性能消耗（雪碧圖）。
網絡字體，在網絡加載比較慢的情況下，用戶可能會感受到字體或者圖形的變化（Icon Font）。其實，瀏覽器在渲染樹構建完成之後，會指示需要哪些字體在網頁上渲染指定文本，然後分派字體請求，瀏覽器執行佈局並將內容繪製到屏幕上，如果字體尚不可用，瀏覽器可能不會渲染任何文本像素，待字體可用之後，再繪製文本像素，當然，不同瀏覽器之間實際行為有所差異，這裡不在贅述，請參考文章尾部的資料鏈接。
總結
優化關鍵渲染路徑的最終目的是優先顯示和用戶操作相關的內容，減少低優先級資源對瀏覽器渲染的阻塞，從而儘早顯示用戶真正關心的關鍵內容。頁面性能就是用戶體驗的一個重要維度，嘗試用感性的思維去思考理性的代碼，也許真的能受益不少。
閱讀更多 前端小學生 的文章
關鍵字: HTML 優化 JavaScript
