避免使用非合成動畫

網頁上的部分動畫可以完全在轉譯管道的合成器階段處理。

未合成的動畫需要更多工作，而且在低階手機上或在主執行緒上執行效能密集的工作時，可能會出現「卡頓」 (不順暢) 的情形。

非合成的動畫也會增加網頁的累計版面配置位移 (CLS)，因為這類動畫會導致 CLS 演算法評估的元素實際移動，進而影響其他元素的位移。合成的動畫不會導致其他元素移動，因此會從 CLS 中排除。降低 CLS 可提升 Lighthouse 效能分數。

背景

瀏覽器用來將 HTML、CSS 和 JavaScript 轉換為像素的演算法，統稱為轉譯管道。

轉譯管道包含下列依序步驟：JavaScript、樣式、版面配置、繪圖、合成。
轉譯管道。

即使您不瞭解算繪管線的每個步驟代表什麼，也沒關係。目前要瞭解的重點是，在轉譯管道的每個步驟中，瀏覽器都會使用先前作業的結果來建立新資料。舉例來說，如果程式碼會觸發版面配置，則需要再次執行 Paint 和 Composite 步驟。非合成的動畫是指會觸發轉譯管道中較早步驟 (樣式、版面配置或繪製) 的任何動畫。非合成的動畫效能較差，因為這類動畫會迫使瀏覽器執行更多工作。

請參閱下列資源，深入瞭解算繪管道：

Lighthouse 如何偵測未合成的動畫

如果無法合成動畫，Chrome 會將失敗原因回報給開發人員工具追蹤記錄，而 Lighthouse 會讀取這項資訊。Lighthouse 會列出 DOM 節點，其中動畫未經合成，並附上每個動畫的失敗原因。

如何確保動畫合成

請參閱「只使用合成器專屬屬性並管理圖層數量」和「高效能動畫」。

資源