動畫與成效

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

每次播放動畫時,請維持 60 FPS 的影格速率,因為加入動畫的效果較小或停滯,會讓使用者更容易察覺,進而對使用體驗造成負面影響。

  • 請注意,動畫不會造成效能問題。確定瞭解為指定 CSS 屬性加上動畫效果的影響。
  • 為屬性套用變更網頁幾何圖形 (版面配置) 或造成繪製作業的成本特別高。
  • 在可以的情況下,請堅持變更轉換和不透明度。
  • 使用 will-change,確保瀏覽器知道您要建立動畫的內容。

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

如果可以,請避免使用會觸發版面配置或繪製的動畫屬性。對大多數的新式瀏覽器來說,這表示將動畫限制為 opacitytransform,這兩種瀏覽器都能提供高度最佳化的體驗。動畫是由 JavaScript 或 CSS 處理。

參閱完整指南,瞭解如何製作高效能動畫

使用 will-change 屬性

瀏覽器支援

  • Chrome:36.
  • Edge:79,
  • Firefox:36。
  • Safari:9.1。

資料來源

使用 will-change 可確保瀏覽器知道您要變更元素的屬性。如此一來,瀏覽器在您進行變更時,就會優先採用最合適的最佳化措施。但請勿過度使用 will-change,因為這麼做可能會導致瀏覽器浪費資源,進一步造成效能問題。

原則上,如果動畫可能會在未來 200 毫秒內 (透過使用者互動或應用程式的狀態觸發) 觸發,就很適合使用 will-change 為元素建立動畫效果。在大多數情況下,如果應用程式目前檢視畫面中想建立動畫元素,您打算變更的任何屬性都應啟用 will-change。如果是我們在先前指南中使用的方塊範例,請為轉換和不透明度新增 will-change,如下所示:

.box {
  will-change: transform, opacity;
}

目前支援新版瀏覽器的瀏覽器下,系統會在背景進行適當的最佳化調整,支援變更或呈現這些屬性。

CSS 與 JavaScript 成效的差異

網路上有許多網頁和評論討論串,會從成效的角度討論 CSS 和 JavaScript 動畫的相對優點。請注意以下幾點:

  • 如果原生支援 CSS 動畫和網路動畫,通常都會在名為「合成器執行緒」的執行緒上處理。這不同於瀏覽器的「主執行緒」,也就是執行樣式、版面配置、繪製和 JavaScript 的位置。換句話說,如果瀏覽器在主執行緒上執行一些昂貴的工作,這些動畫就不會中斷。

  • 在許多情況下,轉換和不透明度的其他變更也可以由合成器執行緒處理。

  • 如果有任何動畫觸發繪製和/或版面配置,「主要執行緒」就會觸發沒那麼做的事這種情況對於 CSS 和 JavaScript 動畫都有效,而且版面配置或繪製的額外負荷可能會分散任何與 CSS 或 JavaScript 執行作業相關聯的工作,導致問題模組無法流暢顯示。