優化CSS：通過DevTools調整動畫性能

CSS動畫性能優化指南：利用瀏覽器開發者工具提升動畫流暢度

本文與SiteGround合作創作。感謝支持SitePoint的合作夥伴們。

眾所周知，CSS動畫性能通常很高。然而，對於包含大量元素或複雜動畫的場景，如果代碼沒有針對性能進行優化，則會導致動畫卡頓，影響用戶體驗。

本文將介紹一些實用的瀏覽器開發者工具功能，幫助您檢查CSS動畫背後的運行機制。當動畫出現卡頓時，您可以更好地了解原因並進行修復。

關鍵要點

• 利用瀏覽器開發者工具優化CSS動畫性能，識別導致動畫卡頓的問題，並深入了解動畫的底層運行情況。這些工具可以檢查幀率、審查、編輯和調試代碼，以及分析可能影響性能的佈局和繪製操作。
• 為了獲得流暢的動畫效果，目標幀率應達到60fps（每秒幀數）。為了確保動畫更流暢，只對CSS的不透明度（opacity）、變換（transforms）和濾鏡（filters）進行動畫效果設置。動畫化其他屬性可能會給瀏覽器帶來壓力，迫使其在極短時間內執行代價高昂的任務，從而導致糟糕的結果。
• 使用will-change CSS屬性，或translateZ(0)和translate3d(0,0,0)技巧來強制瀏覽器將某些屬性更改的工作交給GPU（圖形處理單元）處理。這利用了硬件加速，並減輕了瀏覽器主線程的部分壓力。但是，過度使用可能會導致您試圖避免的問題，例如動畫卡頓。

開發者工具與CSS性能分析

您的動畫需要達到60fps才能在瀏覽器中流暢運行。幀率越低，動畫效果越差。這意味著瀏覽器每幀最多只有大約16毫秒的時間來完成其工作。但在這段時間內它做了什麼？你如何知道你的瀏覽器是否跟上了所需的幀率？

我認為，在評估動畫質量時，沒有什麼比用戶體驗更重要的了。然而，現代瀏覽器的開發者工具雖然並不總是100%可靠，但它們變得越來越智能，您可以使用它們來審查、編輯和調試代碼。

當您需要檢查幀率和CSS動畫性能時，情況也是如此。以下是它的工作原理。

Firefox性能工具探索

在本文中，我使用的是Firefox性能工具。另一個主要的競爭者是Chrome性能工具。您可以選擇您最喜歡的工具，因為這兩個瀏覽器都提供了強大的性能功能。

要在Firefox中打開開發者工具，請選擇以下選項之一：

• 右鍵單擊您的網頁，然後在上下文菜單中選擇“檢查元素”。
• 或者使用鍵盤快捷鍵：在Windows和Linux上按Ctrl Shift I，在macOS上按Cmd Opt I。

接下來，單擊“性能”選項卡。在這裡，您會找到一個按鈕，可以讓您開始錄製網站的性能數據：

按下該按鈕並等待幾秒鐘，或者在頁面上執行某些操作。完成後，單擊“停止性能錄製”按鈕：

瞬間，Firefox就會向您呈現大量組織良好的數據，幫助您了解代碼中存在哪些問題。

“性能”面板中的錄製結果如下所示：

“瀑布流”部分非常適合檢查與CSS過渡和關鍵幀動畫相關的問題。其他部分是“調用樹”和“JS火焰圖”，您可以使用它們來找出JavaScript代碼中的瓶頸。

瀑布流視圖頂部有一個摘要部分和一個詳細的細分。在這兩者中，數據都是用顏色編碼的：

• 黃色條表示JavaScript操作。
• 紫色條表示計算HTML元素的CSS樣式（重新計算樣式）和頁面佈局（佈局）。佈局操作對於瀏覽器來說代價相當高昂，因此，如果您動畫化涉及重複佈局（也稱為“回流”——例如margin、padding、top、left等）的屬性，則結果可能會卡頓。
• 綠色條表示將元素繪製到一個或多個位圖中（繪製）。動畫化諸如color、background-color、box-shadow等屬性會涉及代價高昂的繪製操作，這可能是動畫遲緩和用戶體驗不佳的原因。

您還可以篩選要檢查的數據類型。例如，我只對CSS相關數據感興趣，因此我可以通過單擊屏幕左上角的篩選圖標來取消選擇其他所有內容：

瀑布流摘要下方的綠色大條表示幀率信息。

健康的表示應該看起來相當高，但最重要的是一致——也就是說，沒有太多深的間隙。

讓我們用一個例子來說明這一點。

性能工具實戰

這是一個使用@keyframes關鍵字的簡單CSS動畫。測試頁面如下所示：

矩形紫色框以無限循環的方式滑入和滑出視野。

我通過動畫化表示屏幕上矩形框的<div>元素的<code>margin-left屬性來實現這一點。 @keyframes動畫塊如下所示：

<code class="language-css">@keyframes slide-margin {
  100% {
    margin-left: 0;
  }
}</code>

我從這個動畫中獲得的性能數據如下所示：

幀率可視化看起來有點參差不齊，平均幀率為44.82fps，有點低。

此外，請注意在動畫過程中發生的所有佈局和繪製操作。這些是瀏覽器在其主線程上執行的代價高昂的操作，這對性能有負面影響。

最後，如果您訪問“檢查器”工具，單擊“動畫”部分，然後將鼠標懸停在動畫名稱上，則會彈出一個信息框，其中包含有關當前動畫的所有相關數據。如果您的動畫經過優化，則會顯示一條說明該事實的消息。在本例中，沒有消息：

現在，我將更改我的代碼並進行新的錄製，因為瀏覽器使用此@keyframes塊動畫化CSStranslate3d()屬性：

<code class="language-css">@keyframes slide-three-d {
  100% {
    transform: translate3d(0, 0, 0);
  }
}</code>

這是性能錄製的圖像：

現在幀率更高（56.83fps），瀑布流沒有顯示代價高昂的佈局和繪製操作。

此外，如果您打開開發者工具的“檢查器”選項卡，訪問“動畫”面板並將鼠標懸停在動畫名稱上，您會看到類似這樣的內容：

與動畫名稱相關的Info框指出所有動畫都已優化，這對您的網站訪問者來說是個好消息。

僅動畫化CSS的opacity、transforms和filters

您可能以前聽過這條建議，但以防萬一，還是值得再講一遍：如果您希望動畫流暢運行，則只對CSS的不透明度（opacity）、變換（transforms）和濾鏡（ filters）進行動畫效果設置。動畫化其他所有內容都會給瀏覽器帶來壓力，迫使其在極短時間內執行代價高昂的任務，這通常不會產生最佳結果。

正如瀏覽器中的性能工具所證實的那樣，重複的佈局和繪製操作並非您的朋友。

但是，每個瀏覽器處理CSS屬性的方式略有不同。如果您想知道哪個瀏覽器會為哪些屬性觸發佈局和繪製操作（尤其是在更新這些屬性的值時，這是Web動畫中涉及的操作），請訪問CSS Triggers。

為了確保動畫性能，一種流行的方法是強制瀏覽器將某些屬性更改的工作交給GPU（圖形處理單元），這減輕了瀏覽器主線程的部分壓力，並利用了硬件加速。您可以使用will-change CSS屬性，或translateZ(0)和translate3d(0,0,0)技巧來實現。所有這些技巧都有效，但如果您過度使用，您實際上可能會得到您試圖避免的結果，即動畫卡頓。

我不打算詳細介紹Web動畫性能的硬件加速，但如果您想深入了解，請查看下面列出的資源。

資源

• High Performance Animations by Paul Lewis and Paul Irish
• CSS animations and transitions performance: looking inside the browser by Max Vujovic
• Animations and Performance by Paul Lewis and Sam Thorogood
• Stick to Compositor-Only Properties and Manage Layer Count by Paul Lewis
• Tricks for GPU Composited CSS by Sara Soueidan
• An Introduction to the CSS will-change Property by Nick Salloum
• Animating CSS properties by MDN

關於CSS動畫性能的常見問題解答 (FAQs)

影響CSS動畫性能的關鍵因素有哪些？

CSS動畫的性能受多種因素影響。動畫的複雜性、正在動畫化的元素數量以及正在動畫化的屬性都會發揮作用。動畫化諸如transform和opacity之類的屬性往往性能更好，因為它們不會觸發佈局或繪製操作。但是，動畫化諸如width、height或margin之類的屬性可能會導致佈局偏移和重繪，從而減慢動畫速度。此外，設備的硬件和瀏覽器的渲染引擎也會影響CSS動畫的性能。

如何衡量CSS動畫的性能？

您可以使用瀏覽器開發者工具來衡量CSS動畫的性能。例如，在Chrome中，您可以使用“性能”選項卡來記錄和分析動畫的運行時間。此工具提供了動畫生命週期中時間消耗的詳細細分，幫助您識別任何性能瓶頸。

流暢CSS動畫的理想幀率是多少？

流暢動畫的理想幀率是每秒60幀（fps）。這是因為大多數設備每秒刷新屏幕60次。因此，為了創建流暢的動畫，您應該目標每16.67毫秒（1秒/60）更新一次動畫，這對應於60fps。

如何優化CSS動畫以獲得更好的性能？

有多種策略可以優化CSS動畫以獲得更好的性能。一種常見的方法是動畫化不會觸發佈局或繪製操作的屬性，例如transform和opacity。此外，減少正在動畫化的元素數量和簡化動畫也可以提高性能。使用will-change屬性還可以幫助瀏覽器通過提示可能要動畫化的屬性來優化動畫。

就性能而言，CSS動畫和JavaScript動畫有什麼區別？

CSS動畫通常比JavaScript動畫性能更好。這是因為CSS動畫在瀏覽器的渲染引擎上運行，與主JavaScript線程分開。這意味著即使JavaScript線程繁忙，CSS動畫仍然可以流暢運行。但是，JavaScript動畫提供了更多控制和靈活性，這對於復雜的動畫可能是有益的。

硬件加速如何影響CSS動畫性能？

硬件加速可以顯著提高CSS動畫的性能。啟用硬件加速後，瀏覽器會將一些渲染任務卸載到設備的GPU，從而釋放CPU來處理其他任務。這可以導致更流暢的動畫，尤其是在復雜的動畫或涉及大量元素的動畫中。

requestAnimationFrame函數在動畫性能中起什麼作用？

requestAnimationFrame函數是一個JavaScript方法，它允許更有效的動畫，方法是在下一次重繪之前調用指定的函數。這意味著動畫可以與設備的刷新率同步，從而實現更流暢的動畫。它還允許瀏覽器優化動畫，減少CPU使用率並提高性能。

如何使用DevTools的“性能”面板來提高CSS動畫性能？

DevTools中的“性能”面板提供了動畫生命週期中時間消耗的詳細細分。通過分析這些數據，您可以識別任何性能瓶頸並相應地優化動畫。例如，如果大量時間用於繪製，您可能需要考慮動畫化不會觸發繪製操作的屬性。

佈局抖動對CSS動畫性能的影響是什麼？

佈局抖動是指由於DOM中的更改而瀏覽器必須重複計算佈局信息的情況。這會嚴重影響CSS動畫的性能，導致動畫運行緩慢或出現卡頓。為了避免佈局抖動，嘗試將DOM讀寫操作批量在一起，並避免動畫化觸發佈局操作的屬性。

如何使用CSSwill-change屬性來提高動畫性能？

will-change屬性允許您提前告知瀏覽器您計劃動畫化的屬性。這允許瀏覽器在動畫開始之前執行任何必要的優化，這可能會導致更流暢的動畫。但是，應謹慎使用will-change屬性，因為過度使用可能會導致瀏覽器消耗更多資源並對性能產生負面影響。

(請注意，以上所有鏈接都需要替換為實際鏈接)