前端性能優化之--頁面渲染優化全面解析

爲何作優化

經典問題：白屏時間過長，用戶體驗差
產生的緣由：網絡問題、關鍵渲染路徑（CRP）問題

怎麼作優化

如何作好優化呢，網上隨便一搜，就有不少優化總結，無非就是網絡優化、靜態資源（html、js、css、image）優化。下面咱們撇開網絡方面的優化，只分析靜態資源方面的優化。而靜態資源的優化關鍵在於你要去深刻理解 關鍵渲染路徑（CRP）的運行原理和規則。

1、瞭解瀏覽器關鍵渲染路徑（html加載過程）

面試必問：
一、描述一下從url輸入到頁面展現的全過程？
二、描述一下html加載全過程？
如何準確回答相似上面的問題呢，那麼咱們就須要全面瞭解瀏覽器關鍵渲染路徑了，瞭解了工做原理，咱們才能更好的更深刻的理解靜態資源的優化方案

渲染的關鍵路徑分爲如下五步

• 構建DOM樹

構建過程：Bytes->Characters->Tokens->Nodes->Dom

• 構建CSSOM樹

構建過程：Bytes->Characters->Tokens->Nodes->CSSOM

• 合併DOM樹和CSSOM樹構建渲染樹

  一、過濾掉不可見節點(腳本標記、元標記)
  二、過濾掉樣式隱藏的節點（display:none）

• 根據渲染樹來佈局，計算節點的幾何信息（layout）
• 將各個節點繪製在屏幕上（paint）

首先從上面的五步中看出，只有當DOM樹和CSSOM樹都構建完成以後才能夠進行渲染樹的構建，因此這兩步是對總體渲染起阻塞做用的，固然了DOM樹是必須的，它提供給頁面內容，而CSSOM的必要性並非太明顯，因此在CSSOM構建的過程當中能夠作一些優化。在作優化前先要了解這幾個知識點。

一、默認狀況下，CSS是阻塞渲染的資源
二、咱們能夠經過媒體查詢和媒體類型把一部分CSS標記爲不阻塞渲染
（媒體查詢的不足就是會嚴重影響關鍵渲染路徑的性能）
<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
三、瀏覽器**會下載全部CSS資源**、不管它阻塞仍是不阻塞

根據上面三個知識點，會讓你很清晰的知道，CSS優化能夠作的事情就是，根據不一樣CSS使用場景和優先級的不一樣進行不阻塞標記。
若是是必要的CSS就請 儘早的加載（一、引用位置靠前，二、減少文件體積）到客戶端，這樣就減小了對首次渲染的阻塞

2、javascript對渲染的影響和下降影響的策略

首先咱們來討論下javascript。它能夠修改網頁的方方面面，內容、樣式、以及響應用戶的交互。不過，javascript也會阻止DOM的構建和延緩網頁渲染。下面咱們來了解一下javascript和DOM、CSSOM的依賴關係。

• javascript能修改內容和樣式

• 不管（內聯javascript仍是外部javascript文件）都會阻止DOM的構建

  DOM構建過程當中若是遇到（非異步加載async）的javascript標籤，瀏覽器將會終止DOM的構建，當即執行javascript。
  這就是爲何非異步執行的javascript要放在尾部或者將可執行代碼要放在DOMContentLoaded回調中？
  由於若是該javascript代碼操做了未構建完的DOM節點就會由於沒法獲取該節點而沒法執行響應的操做。

• CSSOM的構建影響javascript的執行

  若是在瀏覽器還沒有完成CSSOM的下載和構建時，去運行javascript腳本，那麼瀏覽器會延遲腳本的執行和DOM的構建，直至完成CSSOM的下載和構建。能夠這樣理解，當出現非異步加載的javascript時，CSSOM構建完成時間是早於javascript的執行，二者早於DOMContentloaded（即DOM構建完全完成）。

未優化--javascript正常加載

優化後--javascript異步加載

根據上面的分析，咱們能夠清楚的認識到，非必要優先加載的js，選擇 異步加載是最優選擇。

3、image對首屏渲染的影響

圖像不會阻止首屏的渲染，可是爲了增長用戶體驗咱們應該考慮加載適當大小的圖片，加速圖片的呈現。

如何評估關鍵渲染路徑

前面的內容讓咱們瞭解了關鍵路徑渲染的基本原理和可能優化的機會，下面咱們就須要使用一些工具，幫助咱們去評估現有頁面的CRP性能。

• 測試工具：Lighthouse 能夠快速測試你的網頁，並提供性能報告
• 監控工具：Nivigation Timing Api 設置你的代碼，實時監控用戶使用過程當中的性能。

總結

javascript阻止DOM構建（ DOMCommentLoaded觸發被延遲），css的下載和完成阻止javascript的執行。在沒有javascript或者只含有異步javascript的頁面中，DOM的構建和CSSOM的構建互不影響。