動畫必須效能良好,否則會對使用者體驗造成負面影響。
每次播放動畫時,請維持 60 FPS 的影格速率,因為加入動畫的效果較小或停滯,會讓使用者更容易察覺,進而對使用體驗造成負面影響。
- 請注意動畫是否會導致效能問題,並確保您瞭解動畫對特定 CSS 屬性造成的影響。
- 動畫化屬性會變更網頁 (版面配置) 的幾何圖形或導致繪製,因此成本特別高。
- 請盡可能只變更轉換和不透明度。
- 使用
will-change
,確保瀏覽器知道您要製作哪種動畫。
為屬性製作動畫需要付費,而且某些屬性的動畫費用比其他屬性便宜。舉例來說,為元素的 width
和 height
建立動畫效果會變更元素的幾何圖形,並可能導致網頁上的其他元素移動或變更大小。這項程序稱為「版面配置」 (在 Firefox 等 Gecko 瀏覽器中稱為「重新流動」),如果網頁包含大量元素,這項作業可能會耗費大量資源。每次觸發版面配置時,通常都需要繪製網頁或其部分內容,這通常比版面配置作業本身更耗費資源。
請盡可能避免為會觸發版面配置或繪製作業的屬性設定動畫。對大多數新式瀏覽器而言,這表示動畫必須限制為 opacity
或 transform
,這兩者都能讓瀏覽器進行高度最佳化;無論動畫是由 JavaScript 或 CSS 處理,都沒有差別。
請參閱高效動畫製作指南。
使用 will-change
屬性
使用 will-change
可確保瀏覽器知道您要變更元素的屬性。這樣一來,瀏覽器就能在您進行變更前,先行採用最適當的最佳化方式。不過,請勿過度使用 will-change
,因為這可能會導致瀏覽器浪費資源,進而導致更多效能問題。
一般來說,如果動畫可能會在接下來的 200 毫秒內因使用者互動或應用程式狀態而觸發,建議您在動畫元素上使用 will-change
。因此,在大多數情況下,您在應用程式目前檢視畫面中,想為其產生動畫效果的任何元素,都應針對您要變更的任何屬性啟用 will-change
。以我們在先前指南中使用的方塊範例來說,新增 will-change
以轉換和不透明度為例,如下所示:
.box {
will-change: transform, opacity;
}
在目前支援新版瀏覽器的瀏覽器下,系統會在背景進行適當的最佳化調整,支援變更或呈現這些屬性。
CSS 與 JavaScript 效能
網路上有許多網頁和留言討論串,從效能角度討論 CSS 和 JavaScript 動畫的相對優點。請注意以下幾點:
以 CSS 為基礎的動畫和原生支援的 Web 動畫,通常會在稱為「合成器執行緒」的執行緒上處理。這不同於瀏覽器的「主執行緒」,也就是執行樣式、版面配置、繪製和 JavaScript 的位置。也就是說,如果瀏覽器在主執行緒上執行一些耗用大量資源的工作,這些動畫就能繼續執行,不會受到中斷。
在許多情況下,轉換和不透明度等其他變更也可以由合成器執行緒處理。
如果任何動畫觸發了繪圖、版面配置或兩者皆觸發,就必須使用「主執行緒」執行作業。無論是 CSS 或 JavaScript 動畫,都會發生這種情況,而且版面配置或繪製的額外負擔,可能會讓與 CSS 或 JavaScript 執行作業相關的任何工作顯得微不足道,因此這個問題就無關緊要。