CSS動畫性能優(yōu)化指南：利用瀏覽器開發(fā)者工具提升動畫流暢度

本文與SiteGround合作創(chuàng)作。感謝支持SitePoint的合作伙伴們。

眾所周知，CSS動畫性能通常很高。然而，對于包含大量元素或復(fù)雜動畫的場景，如果代碼沒有針對性能進(jìn)行優(yōu)化，則會導(dǎo)致動畫卡頓，影響用戶體驗。

本文將介紹一些實(shí)用的瀏覽器開發(fā)者工具功能，幫助您檢查CSS動畫背后的運(yùn)行機(jī)制。當(dāng)動畫出現(xiàn)卡頓時，您可以更好地了解原因并進(jìn)行修復(fù)。

關(guān)鍵要點(diǎn)

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

開發(fā)者工具與CSS性能分析

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

我認(rèn)為，在評估動畫質(zhì)量時，沒有什么比用戶體驗更重要的了。然而，現(xiàn)代瀏覽器的開發(fā)者工具雖然并不總是100%可靠，但它們變得越來越智能，您可以使用它們來審查、編輯和調(diào)試代碼。

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

Firefox性能工具探索

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

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

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

接下來，單擊“性能”選項卡。在這里，您會找到一個按鈕，可以讓您開始錄制網(wǎng)站的性能數(shù)據(jù)：

按下該按鈕并等待幾秒鐘，或者在頁面上執(zhí)行某些操作。完成后，單擊“停止性能錄制”按鈕：

瞬間，F(xiàn)irefox就會向您呈現(xiàn)大量組織良好的數(shù)據(jù)，幫助您了解代碼中存在哪些問題。

“性能”面板中的錄制結(jié)果如下所示：

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

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

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

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

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

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

讓我們用一個例子來說明這一點(diǎn)。

性能工具實(shí)戰(zhàn)

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

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

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

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

我從這個動畫中獲得的性能數(shù)據(jù)如下所示：

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

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

最后，如果您訪問“檢查器”工具，單擊“動畫”部分，然后將鼠標(biāo)懸停在動畫名稱上，則會彈出一個信息框，其中包含有關(guān)當(dāng)前動畫的所有相關(guān)數(shù)據(jù)。如果您的動畫經(jīng)過優(yōu)化，則會顯示一條說明該事實(shí)的消息。在本例中，沒有消息：

現(xiàn)在，我將更改我的代碼并進(jìn)行新的錄制，因為瀏覽器使用此@keyframes塊動畫化CSStranslate3d()屬性：

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

這是性能錄制的圖像：

現(xiàn)在幀率更高（56.83fps），瀑布流沒有顯示代價高昂的布局和繪制操作。

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

與動畫名稱相關(guān)的Info框指出所有動畫都已優(yōu)化，這對您的網(wǎng)站訪問者來說是個好消息。

僅動畫化CSS的opacity、transforms和filters

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

正如瀏覽器中的性能工具所證實(shí)的那樣，重復(fù)的布局和繪制操作并非您的朋友。

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

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

我不打算詳細(xì)介紹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

關(guān)于CSS動畫性能的常見問題解答 (FAQs)

影響CSS動畫性能的關(guān)鍵因素有哪些？

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

如何衡量CSS動畫的性能？

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

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

流暢動畫的理想幀率是每秒60幀（fps）。這是因為大多數(shù)設(shè)備每秒刷新屏幕60次。因此，為了創(chuàng)建流暢的動畫，您應(yīng)該目標(biāo)每16.67毫秒（1秒/60）更新一次動畫，這對應(yīng)于60fps。

如何優(yōu)化CSS動畫以獲得更好的性能？

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

就性能而言，CSS動畫和JavaScript動畫有什么區(qū)別？

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

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

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

requestAnimationFrame函數(shù)在動畫性能中起什么作用？

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

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

DevTools中的“性能”面板提供了動畫生命周期中時間消耗的詳細(xì)細(xì)分。通過分析這些數(shù)據(jù)，您可以識別任何性能瓶頸并相應(yīng)地優(yōu)化動畫。例如，如果大量時間用于繪制，您可能需要考慮動畫化不會觸發(fā)繪制操作的屬性。

布局抖動對CSS動畫性能的影響是什么？

布局抖動是指由于DOM中的更改而瀏覽器必須重復(fù)計算布局信息的情況。這會嚴(yán)重影響CSS動畫的性能，導(dǎo)致動畫運(yùn)行緩慢或出現(xiàn)卡頓。為了避免布局抖動，嘗試將DOM讀寫操作批量在一起，并避免動畫化觸發(fā)布局操作的屬性。

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

will-change屬性允許您提前告知瀏覽器您計劃動畫化的屬性。這允許瀏覽器在動畫開始之前執(zhí)行任何必要的優(yōu)化，這可能會導(dǎo)致更流暢的動畫。但是，應(yīng)謹(jǐn)慎使用will-change屬性，因為過度使用可能會導(dǎo)致瀏覽器消耗更多資源并對性能產(chǎn)生負(fù)面影響。

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