關鍵要點

• 為了獲得更好的動畫性能，避免對觸發(fā)布局或繪制操作的 CSS 屬性進行動畫處理，而應使用現(xiàn)代瀏覽器已優(yōu)化的屬性，例如 transform 和 opacity。
• 可以使用 CSS will-change 屬性將要進行動畫處理的元素提升到它們自己的圖層，但這應該謹慎操作，因為它需要內(nèi)存和管理。
• 使用 requestAnimationFrame 替換 setTimeout/setInterval，以減少卡頓的風險并確保動畫更流暢，因為此方法會在最適合瀏覽器的時機執(zhí)行動畫代碼。
• 對于 HTML5 Canvas 中復雜的繪圖操作，使用離屏畫布來提高性能，方法是在離屏畫布上執(zhí)行所有繪圖操作，然后在每一幀上繪制離屏畫布。

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

為了確保網(wǎng)頁動畫能夠勝任這些關鍵任務，重要的是運動必須在正確的時間以流暢的方式進行，以便用戶將其視為輔助，而不是妨礙他們在應用程序上嘗試執(zhí)行的任何操作。

糟糕的動畫設計會導致一個令人討厭的效果——卡頓（jank），jankfree.org 對其解釋如下：

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

如果動畫卡頓，用戶最終會越來越少地與您的應用程序交互，從而對其成功產(chǎn)生負面影響。顯然，沒有人想要那樣。

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

1. 避免對代價高昂的 CSS 屬性進行動畫處理

無論您計劃使用CSS 過渡/CSS 關鍵幀還是JavaScript 來對CSS 屬性進行動畫處理，了解哪些屬性會導致頁面幾何形狀發(fā)生變化（布局）——這意味著必須重新計算頁面上其他元素的位置，或者會涉及繪制操作——這一點非常重要。布局和繪制任務對于瀏覽器來說處理起來非常昂貴，尤其是在頁面上有多個元素的情況下。因此，如果您避免對觸發(fā)布局或繪制操作的CSS 屬性進行動畫處理，并堅持使用諸如transform 和opacity 之類的屬性，則會看到動畫性能顯著提高，因為現(xiàn)代瀏覽器在優(yōu)化這些屬性方面做得非常出色。

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

更改僅觸發(fā)合成操作的 CSS 屬性是您可以采取的優(yōu)化網(wǎng)頁動畫性能的簡單有效步驟。

2. 將要進行動畫處理的元素提升到它們自己的圖層（謹慎操作）

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

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

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

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

3. 使用 requestAnimationFrame 替換 setTimeout/setInterval

JavaScript 動畫通常使用 setInterval() 或 setTimeout() 進行編碼。

代碼如下所示：

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

// 要停止動畫，請使用 clearInterval
function stopAnimation() {
  clearInterval(timer);
}

雖然這有效，但卡頓的風險很高，因為回調(diào)函數(shù)在幀中的某個時間點運行，可能在最后，這可能導致錯過一幀或多幀。如今，您可以使用一種專為流暢網(wǎng)頁動畫（DOM 動畫、畫布等）設計的原生 JavaScript 方法，稱為 requestAnimationFrame()。

requestAnimationFrame() 在最適合瀏覽器的時機執(zhí)行您的動畫代碼，通常在幀的開頭。

您的代碼可能如下所示：

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

// 要停止動畫，請使用 clearInterval
function stopAnimation() {
  clearInterval(timer);
}

SitePoint 上 Tim Evko 的《使用 requestAnimationFrame 提高性能》提供了一個關于使用 requestAnimationFrame() 進行編碼的精彩視頻介紹。

4. 在代碼中將事件與動畫解耦

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

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

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

5. 避免長時間運行的 JavaScript 代碼

瀏覽器使用主線程來運行 JavaScript，以及其他任務，例如樣式計算、布局和繪制操作。長時間運行的 JavaScript 代碼可能會對這些任務產(chǎn)生負面影響，這可能導致幀被跳過并導致動畫卡頓。因此，簡化代碼肯定是一種確保動畫流暢運行的好方法。

對于不需要訪問 DOM 的復雜 JavaScript 操作，請考慮使用 Web Workers。工作線程執(zhí)行其任務不會影響用戶界面。

6. 利用瀏覽器的開發(fā)者工具來控制性能問題

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

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

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

此時，您應該擁有大量數(shù)據(jù)來幫助您分析頁面的性能：

本 Chrome DevTools 指南將幫助您充分利用 DevTools 來分析 Chrome 瀏覽器中的性能和許多其他類型的數(shù)據(jù)。如果 Chrome 不是您選擇的瀏覽器，這沒關系，因為如今大多數(shù)現(xiàn)代瀏覽器都配備了功能強大的 DevTools，您可以利用它們來優(yōu)化代碼。

7. 對于復雜的繪圖操作，使用離屏畫布

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

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

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

結(jié)論

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

關于無卡頓 JavaScript 動畫的常見問題解答 (FAQ)

什么是 JavaScript 動畫中的“卡頓”概念？

“卡頓”是指用戶在網(wǎng)站或應用程序跟不上刷新率時看到的任何卡頓、抖動或簡單的停頓。在 JavaScript 動畫中，當幀速率低于標準的每秒 60 幀時，可能會發(fā)生卡頓。這會導致動畫不那么流暢和視覺上不那么吸引人，這會對用戶體驗產(chǎn)生負面影響。

如何確保 JavaScript 動畫流暢？

確保 JavaScript 動畫流暢涉及優(yōu)化代碼以保持穩(wěn)定的每秒 60 幀。這可以通過使用 requestAnimationFrame 方法來實現(xiàn)，該方法允許瀏覽器優(yōu)化動畫。您還可以對簡單的動畫使用 CSS 過渡或動畫，因為它們通常比 JavaScript 更高效。此外，通過將 DOM 讀寫操作一起批處理來避免布局抖動。

requestAnimationFrame 在 JavaScript 動畫中的作用是什么？

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

為什么 CSS 過渡或動畫可能比 JavaScript 更高效？

CSS 過渡和動畫可能比 JavaScript 更高效，因為它們由瀏覽器的合成器線程處理，與主 JavaScript 線程分開。這意味著即使主線程忙于其他任務，它們也可以順利運行。此外，某些屬性可以在 CSS 中進行動畫處理而不會導致重繪，這使得它們特別高效。

什么是布局抖動，如何在 JavaScript 動畫中避免它？

布局抖動是指 JavaScript 反復讀取和寫入 DOM，導致瀏覽器多次重新計算布局，從而導致動畫低效、卡頓。這可以通過將 DOM 讀寫操作一起批處理來避免。例如，您可以先進行所有讀取操作，然后再進行所有寫入操作，而不是交錯讀取和寫入操作。

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

CSS 中的 will-change 屬性允許您提前告知瀏覽器您可能要對元素進行哪些類型的更改，以便它可以在需要之前設置適當?shù)膬?yōu)化。這可以顯著提高動畫的性能。但是，應該謹慎使用，因為過度使用會導致瀏覽器花費太多時間進行優(yōu)化。

transform 和 opacity 屬性在 JavaScript 動畫中的意義是什么？

CSS 中的 transform 和 opacity 屬性對于動畫來說特別高效。這是因為對這些屬性的更改可以由瀏覽器的合成器線程處理，而無需布局或繪制。這意味著即使主 JavaScript 線程繁忙，它們也可以順利運行。

如何使用 Web Workers 來提高 JavaScript 動畫的性能？

JavaScript 中的 Web Workers 允許您在后臺運行腳本，與主執(zhí)行線程分開。這意味著它們可以處理計算密集型任務，而不會阻塞主線程并導致卡頓。但是，它們有一些限制，例如無法訪問 DOM 或某些 Web API。

什么是“非主線程”動畫，它如何使 JavaScript 動畫受益？

“非主線程”動畫是指在與主 JavaScript 線程分開的單獨線程上運行動畫。這可以顯著提高動畫的性能，因為它允許它們即使在主線程繁忙時也能順利運行。這可以通過使用 CSS 動畫、Web Workers 或 Web Animations API 來實現(xiàn)。

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

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

以上是7個無垃圾JavaScript動畫的性能提示的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！