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

• 為了獲得更好的動(dòng)畫(huà)性能，避免對(duì)觸發(fā)佈局或繪製操作的 CSS 屬性進(jìn)行動(dòng)畫(huà)處理，而應(yīng)使用現(xiàn)代瀏覽器已優(yōu)化的屬性，例如 transform 和 opacity。
• 可以使用 CSS will-change 屬性將要進(jìn)行動(dòng)畫(huà)處理的元素提升到它們自己的圖層，但這應(yīng)該謹(jǐn)慎操作，因?yàn)樗枰獌?nèi)存和管理。
• 使用 requestAnimationFrame 替換 setTimeout/setInterval，以減少卡頓的風(fēng)險(xiǎn)並確保動(dòng)畫(huà)更流暢，因?yàn)榇朔椒〞?huì)在最適合瀏覽器的時(shí)機(jī)執(zhí)行動(dòng)畫(huà)代碼。
• 對(duì)於 HTML5 Canvas 中復(fù)雜的繪圖操作，使用離屏畫(huà)布來(lái)提高性能，方法是在離屏畫(huà)布上執(zhí)行所有繪圖操作，然後在每一幀上繪製離屏畫(huà)布。

網(wǎng)頁(yè)動(dòng)畫(huà)的作用已經(jīng)從簡(jiǎn)單的裝飾性效果發(fā)展到在用戶體驗(yàn)中發(fā)揮具體作用——例如，在用戶與您的應(yīng)用程序交互時(shí)提供視覺(jué)反饋，引導(dǎo)用戶關(guān)注以實(shí)現(xiàn)應(yīng)用程序的目標(biāo)，提供幫助用戶理解應(yīng)用程序界面的視覺(jué)提示等等。

為了確保網(wǎng)頁(yè)動(dòng)畫(huà)能夠勝任這些關(guān)鍵任務(wù)，重要的是運(yùn)動(dòng)必須在正確的時(shí)間以流暢的方式進(jìn)行，以便用戶將其視為輔助，而不是妨礙他們?cè)趹?yīng)用程序上嘗試執(zhí)行的任何操作。

糟糕的動(dòng)畫(huà)設(shè)計(jì)會(huì)導(dǎo)致一個(gè)令人討厭的效果——卡頓（jank），jankfree.org 對(duì)其解釋如下：

現(xiàn)代瀏覽器試圖與設(shè)備的刷新率同步刷新屏幕上的內(nèi)容。對(duì)於當(dāng)今大多數(shù)設(shè)備而言，屏幕每秒刷新 60 次，或 60Hz。如果屏幕上有一些運(yùn)動(dòng)（例如滾動(dòng)、過(guò)渡或動(dòng)畫(huà)），瀏覽器應(yīng)該每秒創(chuàng)建 60 幀以匹配刷新率?？D是用戶在網(wǎng)站或應(yīng)用程序跟不上刷新率時(shí)看到的任何卡頓、抖動(dòng)或簡(jiǎn)單的停頓。

如果動(dòng)畫(huà)卡頓，用戶最終會(huì)越來(lái)越少地與您的應(yīng)用程序交互，從而對(duì)其成功產(chǎn)生負(fù)面影響。顯然，沒(méi)有人想要那樣。

在本文中，我收集了一些性能技巧，以幫助您解決 JavaScript 動(dòng)畫(huà)問(wèn)題，並更輕鬆地達(dá)到 60fps（每秒幀數(shù)）的目標(biāo)，從而在網(wǎng)絡(luò)上實(shí)現(xiàn)流暢的運(yùn)動(dòng)。

1. 避免對(duì)代價(jià)高昂的 CSS 屬性進(jìn)行動(dòng)畫(huà)處理

無(wú)論您計(jì)劃使用CSS 過(guò)渡/CSS 關(guān)鍵幀還是JavaScript 來(lái)對(duì)CSS 屬性進(jìn)行動(dòng)畫(huà)處理，了解哪些屬性會(huì)導(dǎo)致頁(yè)面幾何形狀發(fā)生變化（佈局）——這意味著必須重新計(jì)算頁(yè)面上其他元素的位置，或者會(huì)涉及繪製操作——這一點(diǎn)非常重要。佈局和繪製任務(wù)對(duì)於瀏覽器來(lái)說(shuō)處理起來(lái)非常昂貴，尤其是在頁(yè)面上有多個(gè)元素的情況下。因此，如果您避免對(duì)觸發(fā)佈局或繪製操作的CSS 屬性進(jìn)行動(dòng)畫(huà)處理，並堅(jiān)持使用諸如transform 和opacity 之類的屬性，則會(huì)看到動(dòng)畫(huà)性能顯著提高，因?yàn)楝F(xiàn)代瀏覽器在優(yōu)化這些屬性方面做得非常出色。

在 CSS Triggers 上，您可以找到一個(gè)最新的 CSS 屬性列表，其中包含有關(guān)它們?cè)诿總€(gè)現(xiàn)代瀏覽器中觸發(fā)的操作的信息，包括第一次更改和後續(xù)更改。

更改僅觸發(fā)合成操作的 CSS 屬性是您可以採(cǎi)取的優(yōu)化網(wǎng)頁(yè)動(dòng)畫(huà)性能的簡(jiǎn)單有效步驟。

2. 將要進(jìn)行動(dòng)畫(huà)處理的元素提升到它們自己的圖層（謹(jǐn)慎操作）

如果要進(jìn)行動(dòng)畫(huà)處理的元素位於它自己的合成器圖層上，一些現(xiàn)代瀏覽器會(huì)利用硬件加速將工作卸載到 GPU。如果使用得當(dāng)，此舉可以對(duì)動(dòng)畫(huà)的性能產(chǎn)生積極影響。

要使元素位於它自己的圖層上，您需要提升它。一種方法是使用 CSS will-change 屬性。此屬性允許開(kāi)發(fā)人員提前警告瀏覽器他們想要對(duì)元素進(jìn)行的一些更改，以便瀏覽器可以提前進(jìn)行必要的優(yōu)化。

但是，不建議您將太多元素提升到它們自己的圖層上，或者誇大其詞地這樣做。事實(shí)上，瀏覽器創(chuàng)建的每個(gè)圖層都需要內(nèi)存和管理，這可能是昂貴的。

您可以在 Nick Salloum 的《CSS will-change 屬性簡(jiǎn)介》中了解如何使用 will-change、它的優(yōu)點(diǎn)和缺點(diǎn)的詳細(xì)信息。

3. 使用 requestAnimationFrame 替換 setTimeout/setInterval

JavaScript 動(dòng)畫(huà)通常使用 setInterval() 或 setTimeout() 進(jìn)行編碼。

代碼如下所示：

var timer;
function animateElement() {
  timer = setInterval(function() {
    // 動(dòng)畫(huà)代碼在此處
  }, 2000);
}

// 要停止動(dòng)畫(huà)，請(qǐng)使用 clearInterval
function stopAnimation() {
  clearInterval(timer);
}

雖然這有效，但卡頓的風(fēng)險(xiǎn)很高，因?yàn)榛卣{(diào)函數(shù)在幀中的某個(gè)時(shí)間點(diǎn)運(yùn)行，可能在最後，這可能導(dǎo)致錯(cuò)過(guò)一幀或多幀。如今，您可以使用一種專為流暢網(wǎng)頁(yè)動(dòng)畫(huà)（DOM 動(dòng)畫(huà)、畫(huà)布等）設(shè)計(jì)的原生 JavaScript 方法，稱為 requestAnimationFrame()。

requestAnimationFrame() 在最適合瀏覽器的時(shí)機(jī)執(zhí)行您的動(dòng)畫(huà)代碼，通常在幀的開(kāi)頭。

您的代碼可能如下所示：

var timer;
function animateElement() {
  timer = setInterval(function() {
    // 動(dòng)畫(huà)代碼在此處
  }, 2000);
}

// 要停止動(dòng)畫(huà)，請(qǐng)使用 clearInterval
function stopAnimation() {
  clearInterval(timer);
}

SitePoint 上 Tim Evko 的《使用 requestAnimationFrame 提高性能》提供了一個(gè)關(guān)於使用 requestAnimationFrame() 進(jìn)行編碼的精彩視頻介紹。

4. 在代碼中將事件與動(dòng)畫(huà)解耦

在每秒 60 幀的情況下，瀏覽器在每一幀上只有 16.67ms 來(lái)完成它的工作。時(shí)間不多，因此保持代碼精簡(jiǎn)可能會(huì)對(duì)動(dòng)畫(huà)的流暢性產(chǎn)生影響。

將處理滾動(dòng)、調(diào)整大小、鼠標(biāo)事件等事件的代碼與使用 requestAnimationFrame() 處理屏幕更新的代碼解耦，是優(yōu)化動(dòng)畫(huà)代碼性能的好方法。

有關(guān)此優(yōu)化技巧和相關(guān)示例代碼的深入討論，請(qǐng)查看 Paul Lewis 的《使用 requestAnimationFrame 創(chuàng)建更精簡(jiǎn)、更強(qiáng)大、更快的動(dòng)畫(huà)》。

5. 避免長(zhǎng)時(shí)間運(yùn)行的 JavaScript 代碼

瀏覽器使用主線程來(lái)運(yùn)行 JavaScript，以及其他任務(wù)，例如樣式計(jì)算、佈局和繪製操作。長(zhǎng)時(shí)間運(yùn)行的 JavaScript 代碼可能會(huì)對(duì)這些任務(wù)產(chǎn)生負(fù)面影響，這可能導(dǎo)致幀被跳過(guò)並導(dǎo)致動(dòng)畫(huà)卡頓。因此，簡(jiǎn)化代碼肯定是一種確保動(dòng)畫(huà)流暢運(yùn)行的好方法。

對(duì)於不需要訪問(wèn) DOM 的複雜 JavaScript 操作，請(qǐng)考慮使用 Web Workers。工作線程執(zhí)行其任務(wù)不會(huì)影響用戶界面。

6. 利用瀏覽器的開(kāi)發(fā)者工具來(lái)控制性能問(wèn)題

瀏覽器的開(kāi)發(fā)者工具提供了一種方法來(lái)監(jiān)控瀏覽器運(yùn)行您的 JavaScript 代碼或第三方庫(kù)的難度。它們還提供有關(guān)幀速率等的實(shí)用信息。

您可以通過(guò)右鍵單擊網(wǎng)頁(yè)並在上下文菜單中選擇“檢查”來(lái)訪問(wèn) Chrome DevTools。例如，使用性能工具記錄您的網(wǎng)頁(yè)將使您深入了解該頁(yè)面上的性能瓶頸：

單擊“記錄”按鈕，然後在幾秒鐘後停止記錄：

此時(shí)，您應(yīng)該擁有大量數(shù)據(jù)來(lái)幫助您分析頁(yè)面的性能：

本 Chrome DevTools 指南將幫助您充分利用 DevTools 來(lái)分析 Chrome 瀏覽器中的性能和許多其他類型的數(shù)據(jù)。如果 Chrome 不是您選擇的瀏覽器，這沒(méi)關(guān)係，因?yàn)槿缃翊蠖鄶?shù)現(xiàn)代瀏覽器都配備了功能強(qiáng)大的 DevTools，您可以利用它們來(lái)優(yōu)化代碼。

7. 對(duì)於復(fù)雜的繪圖操作，使用離屏畫(huà)布

此技巧專門(mén)與優(yōu)化 HTML5 Canvas 代碼有關(guān)。

如果您的幀涉及復(fù)雜的繪圖操作，一個(gè)好主意是在其中執(zhí)行所有繪圖操作一次或僅在發(fā)生更改時(shí)執(zhí)行一次，然後在每一幀上僅繪製離屏畫(huà)布。

您可以在 MDN 的《優(yōu)化 Canvas》文章中找到與該技巧相關(guān)的詳細(xì)信息和代碼示例以及更多內(nèi)容。

結(jié)論

如果您不想在當(dāng)今的網(wǎng)絡(luò)上辜負(fù)用戶的期望，那麼優(yōu)化代碼性能是一項(xiàng)必要的任務(wù)，但這絕非易事。您的動(dòng)畫(huà)性能不佳可能有多種原因，但如果您嘗試使用上面列出的技巧，您將朝著避免最常見(jiàn)的動(dòng)畫(huà)性能陷阱邁進(jìn)一大步，從而改善您的網(wǎng)站或應(yīng)用程序的用戶體驗(yàn)。

關(guān)於無(wú)卡頓 JavaScript 動(dòng)畫(huà)的常見(jiàn)問(wèn)題解答 (FAQ)

什麼是 JavaScript 動(dòng)畫(huà)中的“卡頓”概念？

“卡頓”是指用戶在網(wǎng)站或應(yīng)用程序跟不上刷新率時(shí)看到的任何卡頓、抖動(dòng)或簡(jiǎn)單的停頓。在 JavaScript 動(dòng)畫(huà)中，當(dāng)幀速率低於標(biāo)準(zhǔn)的每秒 60 幀時(shí)，可能會(huì)發(fā)生卡頓。這會(huì)導(dǎo)致動(dòng)畫(huà)不那麼流暢和視覺(jué)上不那麼吸引人，這會(huì)對(duì)用戶體驗(yàn)產(chǎn)生負(fù)面影響。

如何確保 JavaScript 動(dòng)畫(huà)流暢？

確保 JavaScript 動(dòng)畫(huà)流暢涉及優(yōu)化代碼以保持穩(wěn)定的每秒 60 幀。這可以通過(guò)使用 requestAnimationFrame 方法來(lái)實(shí)現(xiàn)，該方法允許瀏覽器優(yōu)化動(dòng)畫(huà)。您還可以對(duì)簡(jiǎn)單的動(dòng)畫(huà)使用 CSS 過(guò)渡或動(dòng)畫(huà)，因?yàn)樗鼈兺ǔ１?JavaScript 更高效。此外，通過(guò)將 DOM 讀寫(xiě)操作一起批處理來(lái)避免佈局抖動(dòng)。

requestAnimationFrame 在 JavaScript 動(dòng)畫(huà)中的作用是什麼？

JavaScript 中的 requestAnimationFrame 方法是創(chuàng)建流暢動(dòng)畫(huà)的關(guān)鍵工具。它告訴瀏覽器您希望執(zhí)行動(dòng)畫(huà)，並請(qǐng)求瀏覽器在下次重繪之前調(diào)用指定函數(shù)來(lái)更新動(dòng)畫(huà)。此方法允許瀏覽器優(yōu)化動(dòng)畫(huà)，從而實(shí)現(xiàn)更流暢、更高效的動(dòng)畫(huà)。

為什麼 CSS 過(guò)渡或動(dòng)畫(huà)可能比 JavaScript 更高效？

CSS 過(guò)渡和動(dòng)畫(huà)可能比 JavaScript 更高效，因?yàn)樗鼈冇蔀g覽器的合成器線程處理，與主 JavaScript 線程分開(kāi)。這意味著即使主線程忙於其他任務(wù)，它們也可以順利運(yùn)行。此外，某些屬性可以在 CSS 中進(jìn)行動(dòng)畫(huà)處理而不會(huì)導(dǎo)致重繪，這使得它們特別高效。

什麼是佈局抖動(dòng)，如何在 JavaScript 動(dòng)畫(huà)中避免它？

佈局抖動(dòng)是指 JavaScript 反復(fù)讀取和寫(xiě)入 DOM，導(dǎo)致瀏覽器多次重新計(jì)算佈局，從而導(dǎo)致動(dòng)畫(huà)低效、卡頓。這可以通過(guò)將 DOM 讀寫(xiě)操作一起批處理來(lái)避免。例如，您可以先進(jìn)行所有讀取操作，然後再進(jìn)行所有寫(xiě)入操作，而不是交錯(cuò)讀取和寫(xiě)入操作。

如何使用 will-change 屬性優(yōu)化 JavaScript 動(dòng)畫(huà)？

CSS 中的 will-change 屬性允許您提前告知瀏覽器您可能要對(duì)元素進(jìn)行哪些類型的更改，以便它可以在需要之前設(shè)置適當(dāng)?shù)膬?yōu)化。這可以顯著提高動(dòng)畫(huà)的性能。但是，應(yīng)該謹(jǐn)慎使用，因?yàn)檫^(guò)度使用會(huì)導(dǎo)致瀏覽器花費(fèi)太多時(shí)間進(jìn)行優(yōu)化。

transform 和 opacity 屬性在 JavaScript 動(dòng)畫(huà)中的意義是什麼？

CSS 中的 transform 和 opacity 屬性對(duì)於動(dòng)畫(huà)來(lái)說(shuō)特別高效。這是因?yàn)閷?duì)這些屬性的更改可以由瀏覽器的合成器線程處理，而無(wú)需佈局或繪製。這意味著即使主 JavaScript 線程繁忙，它們也可以順利運(yùn)行。

如何使用 Web Workers 來(lái)提高 JavaScript 動(dòng)畫(huà)的性能？

JavaScript 中的 Web Workers 允許您在後臺(tái)運(yùn)行腳本，與主執(zhí)行線程分開(kāi)。這意味著它們可以處理計(jì)算密集型任務(wù)，而不會(huì)阻塞主線程並導(dǎo)致卡頓。但是，它們有一些限制，例如無(wú)法訪問(wèn) DOM 或某些 Web API。

什麼是“非主線程”動(dòng)畫(huà)，它如何使 JavaScript 動(dòng)畫(huà)受益？

“非主線程”動(dòng)畫(huà)是指在與主 JavaScript 線程分開(kāi)的單獨(dú)線程上運(yùn)行動(dòng)畫(huà)。這可以顯著提高動(dòng)畫(huà)的性能，因?yàn)樗试S它們即使在主線程繁忙時(shí)也能順利運(yùn)行。這可以通過(guò)使用 CSS 動(dòng)畫(huà)、Web Workers 或 Web Animations API 來(lái)實(shí)現(xiàn)。

如何使用 Web Animations API 創(chuàng)建高效的 JavaScript 動(dòng)畫(huà)？

Web Animations API 提供了一種使用 JavaScript 創(chuàng)建動(dòng)畫(huà)的方法，其性能與 CSS 動(dòng)畫(huà)一樣高效。它允許您直接從 JavaScript 控制和操作動(dòng)畫(huà)，為您提供比 CSS 動(dòng)畫(huà)更大的靈活性。但是，它仍然是一項(xiàng)實(shí)驗(yàn)性技術(shù)，並非所有瀏覽器都完全支持。

以上是7個(gè)無(wú)垃圾JavaScript動(dòng)畫(huà)的性能提示的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！