昨天我們談到如何幫後端減輕壓力、減少網路請求，今天我們會聚焦在瀏覽器渲染，也就是前端如何讓畫面更新更流暢、減少卡頓

為什麼瀏覽器會卡？

瀏覽器在顯示網頁時，會經歷幾個階段：

（前面Day5 DOM那篇文章也有稍稍提到）

1. Render Tree 建立：把 DOM 與 CSS 結合，生成渲染樹
2. Reflow：計算每個元素的位置與大小（消耗效能高）
3. Paint：把每個元素顏色、字型、圖片等繪製到畫面上
4. Composite：把所有圖層合成最終畫面

因為Reflow 和 Paint 這些 DOM操作太頻繁，因此運算很耗費資源

前端可以怎麼做？

• 減少 Reflow 與 Repaint

  • 避免頻繁操作 DOM
    • 將多個 DOM 操作合併在一起，例如先用 documentFragment 組好再一次插入
    • 修改 class 的 style 再一次渲染，不要一個一個設定屬性
  • 使用 CSS 動畫替代 JS 動畫
    • transform、opacity 的動畫只會觸發 Composite，不會重新計算 Layout，比直接改 top、left 效率高
  • 避免觸發 Layout 的屬性讀取
    • 例如 offsetHeight、scrollTop 會強制瀏覽器重新計算 Layout，盡量減少

• Lazy Load

  • 圖片 / 視頻等真的用到的時候再載入

    • 使用 <img loading="lazy"> (預設使用eager，無論圖片位於網頁上的哪個位置，都會載入）
    • 使用 IntersectionObserver（用於監聽目標元件在畫面上出現或離開的時機），只在使用者看到的時候才載入，同時也減輕main thread 負擔（因為本來如果要偵測有沒有超出viewport應該就是用事件監聽loop去執行 Element.getBoundingClientRect() 之類的方法）

  • 減少初次渲染與Windowing

    • Virtualized List （可以參考下面這篇👇有詳細教學實作）

    https://ithelp.ithome.com.tw/articles/10271764

• 減少 Repaint 範圍

  • 避免透明度與陰影頻繁變動
    • 會造成瀏覽器重繪整個元素
  • will-change
    • 告訴瀏覽器這個元素可能會變動，可以獨立渲染圖層，提高動畫性能（但要謹慎使用，他是用於解決現有性能問題，不是預測問題，使用量不能多）

參考資料

https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Performance

https://ithelp.ithome.com.tw/articles/10272251

https://web.dev/articles/browser-level-image-lazy-loading?hl=zh-tw

https://ithelp.ithome.com.tw/articles/10271764

https://developer.mozilla.org/zh-CN/docs/Web/CSS/will-change