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

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

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

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

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

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

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

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

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

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

Firefox性能工具探索

在本文中，我使用的是Firefox性能工具。另一個(gè)主要的競(jìng)爭(zhēng)者是Chrome性能工具。您可以選擇您最喜歡的工具，因?yàn)檫@兩個(gè)瀏覽器都提供了強(qiáng)大的性能功能。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

現(xiàn)在，我將更改我的代碼並進(jìn)行新的錄製，因?yàn)闉g覽器使用此@keyframes塊動(dòng)畫化CSStranslate3d()屬性：

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

這是性能錄製的圖像：

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

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

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

僅動(dòng)畫化CSS的opacity、transforms和filters

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

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

但是，每個(gè)瀏覽器處理CSS屬性的方式略有不同。如果您想知道哪個(gè)瀏覽器會(huì)為哪些屬性觸發(fā)佈局和繪製操作（尤其是在更新這些屬性的值時(shí)，這是Web動(dòng)畫中涉及的操作），請(qǐng)?jiān)L問CSS Triggers。

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

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

資源

• 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動(dòng)畫性能的常見問題解答 (FAQs)

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

CSS動(dòng)畫的性能受多種因素影響。動(dòng)畫的複雜性、正在動(dòng)畫化的元素?cái)?shù)量以及正在動(dòng)畫化的屬性都會(huì)發(fā)揮作用。動(dòng)畫化諸如transform和opacity之類的屬性往往性能更好，因?yàn)樗鼈儾粫?huì)觸發(fā)佈局或繪製操作。但是，動(dòng)畫化諸如width、height或margin之類的屬性可能會(huì)導(dǎo)致佈局偏移和重繪，從而減慢動(dòng)畫速度。此外，設(shè)備的硬件和瀏覽器的渲染引擎也會(huì)影響CSS動(dòng)畫的性能。

如何衡量CSS動(dòng)畫的性能？

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

流暢CSS動(dòng)畫的理想幀率是多少？

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

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

有多種策略可以優(yōu)化CSS動(dòng)畫以獲得更好的性能。一種常見的方法是動(dòng)畫化不會(huì)觸發(fā)佈局或繪製操作的屬性，例如transform和opacity。此外，減少正在動(dòng)畫化的元素?cái)?shù)量和簡(jiǎn)化動(dòng)畫也可以提高性能。使用will-change屬性還可以幫助瀏覽器通過提示可能要?jiǎng)赢嫽膶傩詠韮?yōu)化動(dòng)畫。

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

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

硬件加速如何影響CSS動(dòng)畫性能？

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

requestAnimationFrame函數(shù)在動(dòng)畫性能中起什麼作用？

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

如何使用DevTools的“性能”面板來提高CSS動(dòng)畫性能？

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

佈局抖動(dòng)對(duì)CSS動(dòng)畫性能的影響是什麼？

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

如何使用CSSwill-change屬性來提高動(dòng)畫性能？

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

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