動畫效能和幀速率
Web 上的動畫可以透過 SVG、JavaScript（包括 <canvas> 和 WebGL）、CSS animation、<video>、動圖 GIF，甚至動圖 PNG 和其他影像型別來完成。動畫化 CSS 屬性的效能成本因屬性而異，並且動畫化開銷大的 CSS 屬性可能導致 卡頓，因為瀏覽器努力達到平滑的 幀率。
對於動圖媒體，例如影片和動圖 GIF，主要的效能顧慮是檔案大小——足夠快地下載檔案以避免對效能產生負面影響是最大的問題。基於程式碼的動畫，無論是 CSS、SVG、<canvas>、WebGL 還是其他 JavaScript 動畫，即使頻寬佔用很小，也可能導致效能問題。這些動畫會消耗 CPU 和/或導致卡頓。
使用者期望所有介面互動都是平滑的，所有使用者介面都是響應式的。動畫可以幫助網站感覺更快、更具響應性，但如果處理不當，動畫也會讓網站感覺更慢、更卡頓。響應式使用者介面的幀率為每秒 60 幀（fps）。雖然並非總是能保持 60fps，但為所有動畫保持高且穩定的幀率非常重要。
使用 CSS 動畫，您可以指定多個 關鍵幀，每個關鍵幀使用 CSS 定義元素在動畫特定階段的外觀。瀏覽器會建立動畫，作為從一個關鍵幀到下一個關鍵幀的過渡。
與使用 JavaScript 動畫化元素相比，CSS 動畫可能更容易建立。它們還可能提供更好的效能，因為它們讓瀏覽器對何時渲染幀擁有更大的控制權，並在必要時丟棄幀。
然而，修改 CSS 屬性的效能成本因屬性而異。普遍認為每秒 60 幀是動畫看起來平滑的速率。對於每秒 60 幀的速率，瀏覽器有 16.7 毫秒來執行指令碼、重新計算樣式和佈局（如果需要），以及重新繪製正在更新的區域。緩慢的指令碼和動畫化開銷大的 CSS 屬性可能導致 卡頓，因為瀏覽器努力達到平滑的幀率。
渲染瀑布流
當元素動畫化 CSS 屬性時，瀏覽器用於繪製頁面更改的過程可以描述為由以下步驟組成的瀑布流
- 重新計算樣式：當元素的屬性發生變化時，瀏覽器必須重新計算計算後的樣式。
- 佈局：接下來，瀏覽器使用計算後的樣式來確定元素的位置和幾何形狀。此操作標記為“佈局”，但有時也稱為“重繪”。
- 繪製：最後，瀏覽器需要將元素重繪到螢幕上。最後一個步驟未在此序列中顯示：頁面可能被分成圖層，這些圖層獨立繪製，然後在一個稱為“組合”的過程中合併。
此序列需要適合單個幀，因為螢幕直到完成後才更新。
CSS 屬性成本
在渲染瀑布流的上下文中，某些屬性比其他屬性開銷更大
-
影響元素 **幾何形狀** 或 **位置** 的屬性會觸發
- 樣式重新計算
- layout
- 重繪
-
不影響幾何形狀或位置且不自分層渲染的屬性，不會觸發佈局。它們會觸發
- 樣式重新計算
- 重繪
例如：
color -
自分層渲染的屬性甚至不會觸發重繪，因為更新是在 **組合** 中處理的。這些會觸發
- 樣式重新計算
開發者工具
大多數 Web 瀏覽器都包含工具，可以深入瞭解瀏覽器在動畫頁面元素時所做的工作。使用這些工具，您可以測量應用程式的動畫幀率，並在發現任何效能瓶頸時進行診斷。