動畫效能和幀率

Web 上的動畫可以透過 SVG、JavaScript（包括 <canvas> 和 WebGL）、CSS animation、<video>、動畫 GIF 甚至動畫 PNG 和其他影像型別來實現。動畫 CSS 屬性的效能成本因屬性而異，動畫昂貴的 CSS 屬性會導致 卡頓，因為瀏覽器難以達到流暢的 幀率。

對於動畫媒體（如影片和動畫 GIF），主要的效能問題是檔案大小 - 以足夠快的速度下載檔案以避免對效能產生負面影響是最大的問題。基於程式碼的動畫，無論是 CSS、SVG、<canvas>、WebGL 還是其他 JavaScript 動畫，都可能導致效能問題，即使頻寬佔用很小。這些動畫可能會消耗 CPU 和/或導致卡頓。

使用者期望所有介面互動都流暢，所有使用者介面都具有響應性。動畫可以幫助使網站感覺更快、更具響應性，但如果操作不當，動畫也會使網站感覺更慢、更卡頓。響應式使用者介面每秒具有 60 幀（fps）的幀率。雖然並非總是可以保持 60fps，但對於所有動畫而言，保持高且穩定的幀率非常重要。

使用 CSS 動畫，您可以指定多個 @keyframes，每個 @keyframes 都使用 CSS 定義元素在動畫的特定階段的外觀。瀏覽器將動畫建立為從每個關鍵幀到下一個關鍵幀的過渡。

與使用 JavaScript 對元素進行動畫處理相比，CSS 動畫更容易建立。它們還可以提供更好的效能，因為它們使瀏覽器能夠更好地控制何時渲染幀，並在必要時丟棄幀。

但是，修改 CSS 屬性的效能成本因屬性而異。人們普遍認為，每秒 60 幀是動畫看起來流暢的速率。對於每秒 60 幀的速率，瀏覽器有 16.7 毫秒的時間來執行指令碼、根據需要重新計算樣式和佈局，並重新繪製正在更新的區域。緩慢的指令碼和動畫昂貴的 CSS 屬性會導致 卡頓，因為瀏覽器難以達到流暢的幀率。

渲染瀑布

當元素正在動畫化 CSS 屬性時，瀏覽器用於繪製頁面更改的過程可以描述為一個由以下步驟組成的瀑布：

Flowchart of the CSS rendering waterfall. In order, the steps are recalculate style, layout, and paint.

  1. 重新計算樣式：當元素的屬性發生更改時，瀏覽器必須重新計算計算後的樣式。
  2. 佈局：接下來，瀏覽器使用計算後的樣式來確定元素的位置和幾何形狀。此操作標記為“佈局”，但也有時稱為“迴流”。
  3. 繪製：最後，瀏覽器需要將元素重新繪製到螢幕上。此序列中未顯示最後一步：頁面可能會被分成圖層，這些圖層獨立繪製，然後在一個稱為“合成”的過程中組合在一起。

此序列需要在一個幀內完成，因為螢幕只有在完成時才會更新。

CSS 屬性成本

在渲染瀑布的上下文中，某些屬性比其他屬性更昂貴

  • 影響元素幾何形狀或位置的屬性會觸發
    • 樣式重新計算
    • 佈局
    • 重繪
    例如：left、max-width、border-width、margin-left、font-size
  • 不影響幾何形狀或位置且未在其自身圖層中渲染的屬性不會觸發佈局。它們會觸發
    • 樣式重新計算
    • 重繪
    例如：color
  • 在自身圖層中渲染的屬性甚至不會觸發重繪，因為更新是在合成中處理的。這些會觸發
    • 樣式重新計算
    例如：transform、opacity

開發者工具

大多數 Web 瀏覽器都包含工具，可以深入瞭解瀏覽器在對頁面元素進行動畫處理時所做的工作。使用這些工具，您可以衡量應用程式的動畫幀率，並在發現任何效能瓶頸時對其進行診斷。