摘要：Chromium 即將更新 SVG 動畫、以百分比為基礎的轉換，以及即將推出的背景顏色和裁剪路徑動畫的硬體加速功能。
對於網路動畫效能，系統可能會顯示「硬體加速」和「GPU 加速」動畫等字詞。但究竟是什麼意思？硬體加速樣式是使用 GPU (圖形處理器)，而非 CPU (中央處理器) 來算繪視覺樣式的樣式。這是因為 GPU 可以比 CPU 更快在網頁上算繪視覺變更內容。
使用 GPU 卸載含有大量圖形的轉場效果和動畫，可讓視覺效果和卡頓情形更順暢，因為這些動畫不受主執行緒影響。只要將這些動畫從主執行緒中提取，動畫就能略過頁面上其他執行中指令碼的依賴，導致視覺速度變慢並建立卡頓。
啟用硬體加速動畫
硬體加速動畫是以圖層的形式組合而成，可協助開發人員建立流暢的 60 FPS (每秒影格數) 動畫，改善視覺算繪效能。目前有幾種方式可以在網路上指定和啟用硬體加速動畫和轉換功能：
- 使用 CSS
transform函式或轉換opacity或filter值 - 為元素新增
will-change屬性。 - 透過
OffscreenCanvas建立動畫畫布繪圖 - 建立 WebGL 3D 繪圖
opacity、filter 和 transform，但 background-color 和 clip-path 很快就會加入清單。還有什麼會成為 Chromium 預設的硬體加速功能？管線中包含幾件事，包括 SVG 動畫，這是開發人員經常提出要求的情況。
硬體加速 SVG 動畫
SVG 是所有網站的附加內容，現在與 SVG 的互動更高效。 自 Chromium 89 起，Chrome 將加入與 Firefox 一樣，預設啟用 SVG 動畫的硬體加速功能。開發人員需要做些什麼？什麼都沒有，這項設定會自動套用到 Chromium 89 以上版本的 SVG 動畫。
範例
接著來看看啟用及未啟用硬體加速功能的 SVG 動畫有何差異。載入指標是常用的 UI 元素，例如在 facebook.com 上看到的此元素。這些指標可在使用者等待回應的同時，提示伺服器正在執行工作。這時，回應就會是在側欄中載入其他結果。
開啟開發人員工具後，我們就能開始剖析，實際瞭解 CPU 和 GPU 加速動畫體驗之間的差異。
如左側所示 (Chromium 87)，每次旋轉圖示動畫 (持續進行) 時都會進行重新繪製。右側沒有油漆效果 (Chromium 89 和 Firefox)。開啟「繪製閃爍」功能時，我們可以在開發人員工具轉譯面板中進行測試。
只要仔細查看「成效」面板，就能再次看到這種效果，以及這會如何影響網站資源的整體成效。可避免動畫的算繪和繪製時間完全避免，讓動畫更流暢，應用程式也更高效能。在瀏覽器支援硬體加速 SVG 之前，Facebook 不會提供這個以 SVG 為基礎的載入器，但在主題設定、縮放和解析度需求方面可以提供更彈性，且維護更簡單。
百分比動畫
在 Chromium 89 中，Interactactions 團隊也支援百分比轉換動畫。以百分比為基礎的動畫描述互動，包括移動百分比。舉例來說，您可以將某個比例放大 20%，也可以使用 translateX: -100% 等項目，將回應式側欄選單從螢幕外滑動。
這些類型的 UI 動畫相對常見，但由於之前我們無法合併這類動畫，因此目前並未善用硬體加速。轉換中的百分比取決於方塊大小 (即版面配置)，但現在只要版面配置大小未變更每個頁框，瀏覽器即可預先計算絕對轉換值，並像開發人員提供像素值一樣執行。好消息是 Chromium 團隊正在努力開發這項功能，不久後，這些類型的動畫會自動產生複合型及硬體加速功能。
後續步驟
這些經過更新的動畫可讓網頁樣式更順暢。如前所述，團隊一直在想瞭解未來的網路需求我們目前已預計將 background-color 和 clip-path 轉換為在日後推出的 Chromium 版本中自動使用硬體加速功能。
由於 background-color 用於轉換和效果的用量很高，因此是優先順序，clip-path 也能使整個網路的轉換效果更為高效。當效能與互動性結合時
所有人就能受益！
封面圖片：適用於 Unsplash 的 Siora Photography。