瀏覽器前端優化

 前端優化

• 從用戶體驗（UX）角度，咱們但願前端網頁能夠快速加載
• 從開發體驗（DX）角度，咱們但願前端是快速，簡潔，規範的

 

瀏覽器如何渲染網頁

1. 使用 HTML 建立文檔對象模型（DOM）
2. 使用 CSS 建立 CSS 對象模型（CSSOM）
3. 基於 DOM 和 CSSOM 執行腳本（Scripts）
4. 合併 DOM 和 CSSOM 造成渲染樹（Render Tree）
5. 使用渲染樹佈局（Layout）全部元素
6. 渲染（Paint）全部元素

步驟一 — HTML

瀏覽器從上到下讀取標籤，把他們分解成節點，從而建立 DOM 。

HTML 加載優化策略

• 樣式在頂部，腳本在底部

整體思路是儘量早的加載樣式，儘量晚的加載腳本。緣由是腳本執行以前，須要 HTML 和 CSS 解析完成，所以，樣式儘量的往頂部放，當底部腳本開始執行以前，樣式有足夠的時間完成計算。

進一步講講如何優化

• 最小化和壓縮

方法可用於全部內容，包括 HTML，CSS，JavaScript，圖片和其它資源。

最小化是移除全部多餘的字符，包括空格，註釋，多餘的分號，等等。

壓縮好比 GZip，大大壓縮下載文件的大小

兩種方法都用的狀況下，資源加載量減小了 80% 到 90%。好比：bootstrap 節省了 87% 的流量。

• 無障礙

不會提高頁面的下載速度，但會大大提高殘障人士的滿意度。給元素加上 aria 標籤，圖片提供 alt 文本，HTML 5 無障礙參見。

使用諸如 WAVE 的工具鑑別哪些地方能夠提升可訪問性。

步驟二 — CSS

當瀏覽器發現任何與節點相關的樣式時，好比：外部，內部，或行內樣式，當即中止渲染 DOM ，並利用這些節點建立 CSSOM。這就是 CSS 「渲染阻塞「 的由來。這裏是不一樣類型樣式的優缺點。

//外部樣式
<link rel="stylesheet" href="styles.css">
// 內部樣式
<style>
  h1 {
    font-size: 18px;
  }
</style>
// 行內樣式
<button style="background-color: blue;">Click me</button>

CSSOM 節點建立與 DOM 節點建立相似，隨後，二者合併以下：

CSSOM 的構建會阻塞頁面的渲染，所以咱們想盡早加載樣式，

 

CSS 加載優化策略

• 使用 media 屬性

media 屬性指定加載樣式的條件，好比：符合最大或最小分辨率？仍是面向屏幕閱讀器？

• 延遲加載 CSS

有些樣式，好比：首屏如下的，或者不那麼重要的，能夠等待首屏最有價值的內容渲染完成再加載，可使用腳本等待頁面加載，而後再插入樣式。

這有兩個栗子：The future of loading CSS，Defer load CSS

• 只加載須要的樣式

使用 uncss 相似的工具，儘可能移除不須要的樣式。

步驟三 — JavaScript

瀏覽器不斷構建 DOM / CSSOM 節點，直到發現外部或者行內的腳本。

因爲腳本可能須要訪問或操做以前的 HTML 或樣式，咱們必須等待它們構建完成。

所以瀏覽器必須中止解析節點，完成構建 CSSOM，執行腳本，而後再繼續。這就是 JavaScript 被稱做「解析器阻塞」的緣由。

腳本只能等到先前的 CSS 節點構建完成。

JavaScript 加載優化策略

• 異步加載腳本

腳本添加 async 屬性，能夠通知瀏覽器不要阻塞其他頁面的加載，下載腳本處於較低的優先級。一旦下載完成，就能夠執行。

async 適用於不影響 DOM 或 CSSOM 的腳本，對一些跟咱們的代碼無關的，不影響用戶體驗的外部腳本尤爲適用，好比：分析統計腳本。

• 延遲加載腳本

defer 跟 async 很是類似，不會阻塞頁面加載，但會等到 HTML 完成解析後再執行。

使用 defer 策略的 另外一個好選擇，或者也可使用 addEventListener，瞭解更多，參加這裏。

不幸的是 async 和 defer 對於行內的腳本不起做用，瀏覽器默認會編譯執行它們。

• 操做以前克隆節點

屢次操做 DOM 時能夠嘗試，首先克隆整個 DOM 節點更加高效，操做克隆後的節點，而後替換先前的節點，避免了屢次重繪，下降了 CPU 和內存消耗，同時也避免了沒必要要的頁面閃爍。

須要注意，克隆的時候並無克隆事件監聽。

• Preload/Prefetch/Prerender/Preconnect