優化關鍵渲染路徑CRP

什麼是關鍵渲染路徑？

從收到 HTML、CSS 和 JavaScript 字節到對其進行必需的處理，從而將它們轉變成渲染的像素這一過程當中有一些中間步驟

瀏覽器渲染頁面前須要先構建 DOM 和 CSSOM 樹。所以，咱們須要確保儘快將 HTML 和 CSS 都提供給瀏覽器。

DOM 樹與 CSSOM 樹合併後造成渲染樹。

有了渲染樹，咱們就能夠進入「佈局」階段。

佈局完成後，瀏覽器會當即發出「Paint Setup」和「Paint」事件，將渲染樹轉換成屏幕上的像素。

阻塞渲染的CSS

默認狀況下，CSS 被視爲阻塞渲染的資源，這意味着瀏覽器將不會渲染任何已處理的內容，直至 CSSOM 構建完畢。請務必精簡您的 CSS，儘快提供它，並利用媒體類型和查詢來解除對渲染的阻塞。

CSS 是阻塞渲染的資源。須要將它儘早、儘快地下載到客戶端，以便縮短首次渲染的時間。

阻塞渲染的JS

爲何script標籤要放在底部？
咱們的腳本在文檔的何處插入，就在何處執行。當 HTML 解析器遇到一個 script 標記時，它會暫停構建 DOM，將控制權移交給 JavaScript 引擎；等 JavaScript 引擎運行完畢，瀏覽器會從中斷的地方恢復 DOM 構建。

若是瀏覽器還沒有完成 CSSOM 的下載和構建，而咱們卻想在此時運行腳本，會怎樣？

JavaScript 執行將暫停，直至 CSSOM 就緒。

阻止解析器

若是是外部 JavaScript 文件，瀏覽器必須停下來，等待從磁盤、緩存或遠程服務器獲取腳本，這就可能給關鍵渲染路徑增長數十至數千毫秒的延遲

兩個時間點

• DOMContentLoaded
  表示 DOM 準備就緒 許多 JavaScript 框架都會等待此事件發生後，纔開始執行它們本身的邏輯
• Load
  每一個網頁加載的最後一步，瀏覽器會觸發 onload 事件

優化關鍵渲染路徑的思路

1. 對關鍵路徑進行分析和特性描述：資源數、字節數、長度。
2. 最大限度減小關鍵資源的數量：刪除它們，延遲它們的下載，將它們標記爲異步等。
3. 優化關鍵字節數以縮短下載時間（往返次數）。
4. 優化其他關鍵資源的加載順序：您須要儘早下載全部關鍵資產，以縮短關鍵路徑長度。

優化CRP的方法

1. 使用window.performance.timing API來查看性能
2. 首屏內聯CSS
3. 使用媒體查詢優化CSS
4. JS腳本async異步
5. 減少CSS和JS的體積
6. 腳本放到最底部