動畫與成效

動畫必須效能良好，否則會對使用者體驗造成負面影響。

Paul Lewis

Sam Thorogood

請務必在製作動畫時維持 60 fps，因為 fps 低於此值會導致畫面出現卡頓或停頓情形，使用者會察覺到，並因此影響使用體驗。

• 請注意動畫是否會導致效能問題，並確保您瞭解動畫對特定 CSS 屬性造成的影響。
• 為屬性套用變更網頁幾何圖形 (版面配置) 或造成繪製作業的成本特別高。
• 請盡可能只變更轉換和不透明度。
• 使用 will-change，確保瀏覽器知道您要製作哪種動畫。

為屬性製作動畫需要付費，而且某些屬性的動畫費用比其他屬性便宜。舉例來說，為元素的 width 和 height 建立動畫效果會變更元素的幾何圖形，並可能導致網頁上的其他元素移動或變更大小。這項程序稱為「版面配置」 (在 Firefox 等採用 Gecko 為基礎的瀏覽器中稱為「自動重排」)，如果網頁含有大量元素，可能耗費大量資源。每次觸發版面配置時，通常都需要繪製網頁或其部分內容，這通常比版面配置作業本身更耗費資源。

請盡可能避免為會觸發版面配置或繪製作業的屬性設定動畫。對大多數新式瀏覽器而言，這表示動畫必須限制為 opacity 或 transform，這兩者都能讓瀏覽器進行高度最佳化；無論動畫是由 JavaScript 或 CSS 處理，都沒有差別。

請參閱高效動畫製作指南。

使用 will-change 屬性

瀏覽器支援

• 36
• 79
• 36
• 9.1

資料來源

使用 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 執行作業相關的任何工作顯得微不足道，因此這個問題就無關緊要。