優化CSS：通過DevTools調整動畫性能-css教學-PHP中文網

首頁

web前端

css教學

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

Lisa Kudrow

Feb 16, 2025 pm 12:10 PM

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

Optimizing CSS: Tweaking Animation Performance with DevTools

本文與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。

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

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

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

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

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

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

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

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

Optimizing CSS: Tweaking Animation Performance with DevTools 瀑布流摘要下方的綠色大條表示幀率信息。

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

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

性能工具實戰

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

Optimizing CSS: Tweaking Animation Performance with DevTools 矩形紫色框以無限循環的方式滑入和滑出視野。

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

@keyframes slide-margin {
  100% {
    margin-left: 0;
  }
}

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

Optimizing CSS: Tweaking Animation Performance with DevTools 幀率可視化看起來有點參差不齊，平均幀率為44.82fps，有點低。

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

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

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

@keyframes slide-three-d {
  100% {
    transform: translate3d(0, 0, 0);
  }
}

這是性能錄製的圖像：

Optimizing CSS: Tweaking Animation Performance with DevTools 現在幀率更高（56.83fps），瀑布流沒有顯示代價高昂的佈局和繪製操作。

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

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

僅動畫化CSS的`opacity`、`transforms`和`filters`

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

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

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

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

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

資源

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

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

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