核心要點(diǎn)

• jQuery 的 animate() 函數(shù)雖然實(shí)用，但并非高性能動(dòng)畫(huà)引擎，可能導(dǎo)致內(nèi)存消耗和幀率低的問(wèn)題。然而，對(duì)于不熟悉 CSS 動(dòng)畫(huà)或?qū)で罂鐬g覽器兼容性的開(kāi)發(fā)者來(lái)說(shuō)，它仍然是一個(gè)可行的選擇。
• CSS 動(dòng)畫(huà)通常比 jQuery 的動(dòng)畫(huà)更快、更高效，這主要?dú)w功于 GPU 加速。但是，它們也有一些局限性，包括與舊版 Internet Explorer 的兼容性問(wèn)題，以及依賴(lài)百分比而不是時(shí)間來(lái)確定動(dòng)畫(huà)持續(xù)時(shí)間，這可能會(huì)使調(diào)整變得復(fù)雜。
• Velocity.js 是一個(gè) jQuery 插件，它可以在無(wú)需大幅更改代碼的情況下顯著提高 jQuery 動(dòng)畫(huà)的性能。通過(guò)將 $.animate() 替換為 $.velocity()，開(kāi)發(fā)者可以獲得更高的幀率并保持 jQuery 的鏈?zhǔn)秸{(diào)用特性。

我們都曾使用 jQuery 的 animate() 函數(shù)在網(wǎng)頁(yè)上創(chuàng)建出色的效果。然后，隨著 CSS3 的引入和興起，有人告訴我們我們的代碼很糟糕。他們建議我們放棄所有基于 jQuery 的動(dòng)畫(huà)（以及通?；?JavaScript 的動(dòng)畫(huà)），轉(zhuǎn)而使用基于 CSS 的動(dòng)畫(huà)。這種變化迫使我們處理許多瀏覽器（不）兼容性問(wèn)題和功能缺失；更不用說(shuō)無(wú)法在舊版 Internet Explorer 上運(yùn)行它們了。這種痛苦是合理的，因?yàn)?CSS 動(dòng)畫(huà)比 JavaScript 動(dòng)畫(huà)更快。至少他們這么告訴我們的。這是真的嗎？ jQuery 的 animate() 函數(shù)真的那么慢嗎？有沒(méi)有一種方法可以輕松地增強(qiáng)它而無(wú)需更改我們的代碼？答案是肯定的。在本文中，我們將了解創(chuàng)建動(dòng)畫(huà)的兩種方法的一些局限性，然后我們將了解如何使用 jQuery 代碼獲得更好的性能。

jQuery 的問(wèn)題是什么？

我們都了解并喜愛(ài) jQuery（實(shí)際上有些人并不喜歡）。這個(gè)旨在簡(jiǎn)化 HTML 客戶(hù)端腳本的庫(kù)幫助了全世界數(shù)十萬(wàn)（并非真實(shí)數(shù)據(jù)）開(kāi)發(fā)者。它使 HTML 文檔遍歷和操作、事件處理、Ajax 以及更多操作變得輕而易舉，減輕了處理所有瀏覽器的不兼容性和錯(cuò)誤的負(fù)擔(dān)。在其功能中，jQuery 還允許創(chuàng)建動(dòng)畫(huà)和效果。借助它，我們可以對(duì) CSS 屬性進(jìn)行動(dòng)畫(huà)處理、隱藏元素、淡出元素以及其他類(lèi)似效果。但是，jQuery 的設(shè)計(jì)目標(biāo)從來(lái)都不是成為一個(gè)高性能的動(dòng)畫(huà)引擎，它也從未打算支持真正復(fù)雜、消耗 CPU/GPU 的動(dòng)畫(huà)。作為這一事實(shí)的佐證，jQuery 的內(nèi)存消耗經(jīng)常會(huì)觸發(fā)垃圾回收，從而在執(zhí)行動(dòng)畫(huà)時(shí)造成問(wèn)題。此外，jQuery 在幕后使用 setInterval() 而不是 requestAnimationFrame()（閱讀更多關(guān)于 requestAnimationFrame() 的信息）來(lái)運(yùn)行動(dòng)畫(huà)，這無(wú)助于產(chǎn)生高幀率。由于這些因素，“最了解的人” 提倡使用 CSS 來(lái)創(chuàng)建我們的動(dòng)畫(huà)和效果。

CSS 動(dòng)畫(huà)和過(guò)渡

讓我們明確一點(diǎn)：CSS 動(dòng)畫(huà)優(yōu)于 jQuery 動(dòng)畫(huà)。在談到動(dòng)畫(huà)時(shí)，jQuery 的速度可能比 CSS 慢幾倍。CSS 動(dòng)畫(huà)和過(guò)渡具有由 GPU 硬件加速的優(yōu)勢(shì)，這在移動(dòng)像素方面非常出色。尤其是在性能至關(guān)重要的場(chǎng)合（例如移動(dòng)設(shè)備）中，這一因素似乎是一個(gè)巨大的改進(jìn)。這太棒了，不是嗎？事實(shí)是，所有這些都有局限性和問(wèn)題。第一個(gè)限制是并非所有 CSS 屬性都可以通過(guò) GPU 進(jìn)行改進(jìn)。因此，認(rèn)為使用 CSS 動(dòng)畫(huà)總是會(huì)獲勝的假設(shè)是錯(cuò)誤的。另一個(gè)問(wèn)題是 CSS 動(dòng)畫(huà)不可移植，至少在您可能定位的所有瀏覽器中并非如此。例如，過(guò)渡在 Internet Explorer 9 及以下版本中不起作用。更糟糕的是，CSS 中的動(dòng)畫(huà)目前基于百分比而不是時(shí)間（秒或毫秒）。這意味著，除非您使用 Sass 或 Less 等預(yù)處理器，否則在完成動(dòng)畫(huà)后更改動(dòng)畫(huà)持續(xù)時(shí)間可能會(huì)非常痛苦。最后，CSS 動(dòng)畫(huà)需要鍵入大量供應(yīng)商前綴。是的，我們可以委托一個(gè)工具來(lái)處理它們，但這只是另一件需要擔(dān)心的事情。

除了之前的考慮之外，還有其他一些充分的理由不應(yīng)忽視 jQuery 動(dòng)畫(huà)。它們更多地與技能不足有關(guān)，而不是技術(shù)的弱點(diǎn)本身，但仍然值得一提。如果一個(gè)開(kāi)發(fā)者習(xí)慣于使用 jQuery 創(chuàng)建動(dòng)畫(huà)，那么很有可能該開(kāi)發(fā)者無(wú)法使用 CSS 來(lái)執(zhí)行相同的任務(wù)。也許開(kāi)發(fā)者需要很長(zhǎng)時(shí)間才能在 CSS 中創(chuàng)建相同的效果，以至于付出努力不值得獲得好處?；蛘?，開(kāi)發(fā)者可能不想學(xué)習(xí)另一種技術(shù)來(lái)創(chuàng)建高度可定制的動(dòng)畫(huà)。這沒(méi)有什么可羞愧的。每個(gè)人在一個(gè)特定領(lǐng)域都有自己的局限性。這里的重點(diǎn)是我們希望使用 jQuery 創(chuàng)建的動(dòng)畫(huà)具有更好的性能，這樣我們就無(wú)需將其轉(zhuǎn)換為 CSS 動(dòng)畫(huà)。幸運(yùn)的是，確實(shí)存在解決方案。

改進(jìn) jQuery 的 animate() 函數(shù)

解決 jQuery 動(dòng)畫(huà)問(wèn)題的答案叫做 Velocity.js。Velocity.js 是 <q cite="https://github.com/julianshapiro/velocity">一個(gè) jQuery 插件，它重新實(shí)現(xiàn)了 $.animate() 以產(chǎn)生更高的性能（使 Velocity 也比 CSS 動(dòng)畫(huà)庫(kù)更快），同時(shí)包含了改進(jìn)動(dòng)畫(huà)工作流程的新功能。</q> 與使用舊版 IE 的 jQuery 1.X 不同，Velocity 與 IE8 兼容。對(duì)于大多數(shù)項(xiàng)目來(lái)說(shuō)，這應(yīng)該不是一個(gè)主要問(wèn)題。此時(shí)您可能想知道使用 Velocity.js 會(huì)如何影響代碼庫(kù)。答案是“以一種非?；闹嚨姆绞健薄榱思?Velocity.js，我們所要做的就是下載它并將其包含在我們想要使用的網(wǎng)頁(yè)中。最后一步是將每次出現(xiàn)的 $.animate() 替換為 $.velocity()，無(wú)需更改任何參數(shù)！此更改就像在我們選擇的文本編輯器或 IDE 中執(zhí)行搜索和替換一樣簡(jiǎn)單。完成后，我們的動(dòng)畫(huà)性能將立即得到提升。這很棒，因?yàn)槲覀兛梢灾赜梦覀兊闹R(shí)，而不會(huì)對(duì)代碼庫(kù)產(chǎn)生太大影響。此外，由于它是一個(gè)保持鏈?zhǔn)秸{(diào)用的 jQuery 插件，我們可以繼續(xù)創(chuàng)建 jQuery 典型的“方法調(diào)用鏈”。

結(jié)論

在本文中，我描述了一些影響基于 jQuery 動(dòng)畫(huà)的問(wèn)題。我們討論了為什么 CSS 動(dòng)畫(huà)在過(guò)去幾年中被大力推廣以替代 jQuery。然后，我強(qiáng)調(diào)了 CSS 的一些局限性以及在性能方面的一些缺點(diǎn)。最后，我簡(jiǎn)要地向您介紹了 Velocity.js，這是一個(gè) jQuery 插件，它允許您幾乎無(wú)需更改源代碼即可提高 JavaScript 動(dòng)畫(huà)和效果的性能。本文只是對(duì) jQuery、CSS 和 JavaScript 動(dòng)畫(huà)之間比較的介紹。如果您想深入研究此主題，我強(qiáng)烈建議您閱讀 GSAP 作者和 Velocity.js 作者撰寫(xiě)的以下文章：- 揭穿神話(huà)：CSS 動(dòng)畫(huà)與 JavaScript- CSS 與 JS 動(dòng)畫(huà)：哪個(gè)更快？

關(guān)于改進(jìn) jQuery 動(dòng)畫(huà)的常見(jiàn)問(wèn)題

如何減慢 jQuery 動(dòng)畫(huà)的速度？

可以通過(guò)增加動(dòng)畫(huà)的持續(xù)時(shí)間來(lái)減慢 jQuery 動(dòng)畫(huà)的速度。持續(xù)時(shí)間在 .animate() 方法中以毫秒為單位指定。例如，如果您想將動(dòng)畫(huà)減慢到持續(xù) 5 秒，則應(yīng)編寫(xiě) $(selector).animate({params}, 5000);。數(shù)字越大，動(dòng)畫(huà)越慢。

jQuery 動(dòng)畫(huà)中緩動(dòng)起什么作用？

jQuery 動(dòng)畫(huà)中的緩動(dòng)是指動(dòng)畫(huà)在其持續(xù)時(shí)間內(nèi)不同點(diǎn)處的進(jìn)度速度。jQuery 提供兩種內(nèi)置的緩動(dòng)方法：“swing” 和 “l(fā)inear”。“Swing” 是默認(rèn)的緩動(dòng)方法，它使動(dòng)畫(huà)在開(kāi)始和結(jié)束時(shí)進(jìn)度較慢，在中間進(jìn)度較快。“Linear” 另一方面，確保動(dòng)畫(huà)在整個(gè)過(guò)程中速度恒定。

如何提高 jQuery 動(dòng)畫(huà)的性能？

提高 jQuery 動(dòng)畫(huà)性能的方法有很多。一種方法是在可能的情況下使用 CSS 過(guò)渡，因?yàn)樗鼈兺ǔ１?jQuery 動(dòng)畫(huà)性能更好。另一種方法是限制同時(shí)運(yùn)行的動(dòng)畫(huà)數(shù)量。您還可以使用 requestAnimationFrame 方法，該方法允許瀏覽器優(yōu)化動(dòng)畫(huà)，從而實(shí)現(xiàn)更流暢的動(dòng)畫(huà)。

如何停止正在運(yùn)行的 jQuery 動(dòng)畫(huà)？

您可以使用 .stop() 方法停止正在運(yùn)行的 jQuery 動(dòng)畫(huà)。此方法會(huì)停止選定元素上當(dāng)前正在運(yùn)行的動(dòng)畫(huà)。例如，$(selector).stop(); 將停止選定元素上的動(dòng)畫(huà)。

如何在 jQuery 中鏈接多個(gè)動(dòng)畫(huà)？

您可以通過(guò)在同一元素上簡(jiǎn)單地調(diào)用多個(gè)動(dòng)畫(huà)方法來(lái)鏈接多個(gè) jQuery 動(dòng)畫(huà)。例如，$(selector).fadeIn().slideUp(); 將首先淡入選定元素，然后向上滑動(dòng)它們。jQuery 確保動(dòng)畫(huà)按調(diào)用的順序執(zhí)行。

如何一次在 jQuery 中同時(shí)為多個(gè)屬性設(shè)置動(dòng)畫(huà)？

您可以通過(guò)將包含要為其設(shè)置動(dòng)畫(huà)的屬性的對(duì)象傳遞給 .animate() 方法來(lái)一次在 jQuery 中同時(shí)為多個(gè)屬性設(shè)置動(dòng)畫(huà)。例如，$(selector).animate({height: "300px", width: "200px"}); 將同時(shí)為選定元素的高度和寬度設(shè)置動(dòng)畫(huà)。

如何在 jQuery 動(dòng)畫(huà)中使用回調(diào)函數(shù)？

jQuery 動(dòng)畫(huà)中的回調(diào)函數(shù)是在動(dòng)畫(huà)完成后執(zhí)行的函數(shù)。您可以將回調(diào)函數(shù)作為第二個(gè)參數(shù)傳遞給 .animate() 方法。例如，$(selector).animate({params}, function(){ /* 動(dòng)畫(huà)完成后要執(zhí)行的代碼 */ });。

如何在 jQuery 中創(chuàng)建自定義動(dòng)畫(huà)？

您可以使用 .animate() 方法在 jQuery 中創(chuàng)建自定義動(dòng)畫(huà)。此方法允許您為任何 CSS 屬性設(shè)置動(dòng)畫(huà)。例如，$(selector).animate({left: " =50px"}); 將使選定元素向右移動(dòng) 50 像素。

如何在 jQuery 動(dòng)畫(huà)中使用 queue 和 dequeue 方法？

jQuery 中的 queue 和 dequeue 方法用于控制動(dòng)畫(huà)的執(zhí)行。queue 方法允許您將新的動(dòng)畫(huà)添加到要對(duì)選定元素執(zhí)行的動(dòng)畫(huà)隊(duì)列中。dequeue 方法允許您刪除并執(zhí)行隊(duì)列中的下一個(gè)函數(shù)。

如何在 jQuery 動(dòng)畫(huà)中使用 .delay() 方法？

jQuery 中的 .delay() 方法用于延遲隊(duì)列中后續(xù)項(xiàng)目的執(zhí)行。它通常用于延遲動(dòng)畫(huà)。例如，$(selector).delay(500).fadeIn(); 將使 fadeIn 動(dòng)畫(huà)延遲 500 毫秒。

以上是輕松改善jQuery動(dòng)畫(huà)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！