在本文中，我们将看到两种创建动画的方式的局限性，以及如何通过jQuery代码获得更好的性能。
我们都知道并喜欢jQuery（ 实际上有些人不知道 ）。 该库旨在简化HTML的客户端脚本，已为全球数十万（无真实数据）开发人员提供了帮助。 它使诸如HTML文档遍历和操纵，事件处理，Ajax之类的事情变得轻而易举，从而承担了应对所有浏览器不兼容和错误的负担。
在其功能中，jQuery还允许创建动画和效果。 借助它，我们可以为CSS属性设置动画，隐藏元素，使其褪色以及其他类似效果。 但是，jQuery的设计目标从未成为高性能的动画引擎，也从未打算支持真正复杂的，消耗cpu / gpu的动画。 作为对此事实的确认，jQuery的内存消耗通常会触发垃圾回收，这些垃圾回收会在执行动画时引起问题。 另外，在后台jQuery使用而不是 （ 了解有关更多信息 ）来运行动画，这无助于提高帧率。
由于这些因素，“最了解”的人向CSS宣传了使用动画来创建动画和效果的过程。
让我们说清楚：CSS动画胜过jQuery的动画。 谈论动画时，jQuery的速度可能比CSS慢几倍。 CSS动画和过渡的优势是可以通过GPU硬件加速，这在移动像素方面确实非常好。 特别是在性能至关重要的情况下（例如移动设备），此因素似乎是一个很大的改进。 太棒了，不是吗？ 事实是，这一切都有局限性和问题。
第一个限制是GPU不能改善所有CSS属性。 因此，使用CSS动画将永远获胜的假设是错误的。 另一个问题是CSS动画无法移植，至少在您可能定位的所有浏览器中都不如此。 例如，过渡在Internet Explorer 9及更低版本中不起作用。 似乎还不够，CSS中的动画当前基于百分比而不是时间（秒或毫秒）。 这意味着除非您使用的是Sass或Less之类的预处理器，否则在完成动画后更改动画的持续时间可能会很痛苦。 最后，CSS动画需要输入很多供应商前缀。 是的，我们可以委派一个工具来处理这些问题，但这只是担心的另一件事。
除了前面的考虑之外，还有其他一些理由不折价jQuery动画。 他们与缺乏技能有关，而不是技术本身的弱点，但仍然值得一提。 如果开发人员曾经使用jQuery创建动画，则很可能该开发人员无法使用CSS来执行相同的任务。 开发人员可能需要很长时间才能在CSS中创建相同的效果，所以付出的努力是不值得的。 或者，开发人员可能不想学习另一种技术来创建高度可定制的动画。 这不是可耻的。 每个人在给定领域中都有自己的局限性。
这里的全部要点是我们希望使用jQuery创建的动画具有更好的性能，因此我们不必将它们转换为CSS动画。 对我们来说幸运的是，确实存在解决方案。
jQuery动画问题的答案称为Velocity.js 。 Velocity.js是一个jQuery插件，可重新实现以产生显着更高的性能（使Velocity也比CSS动画库更快），同时包括改进动画工作流程的新功能。 与适用于旧版IE的jQuery 1.X不同，Velocity适用于IE8 +。 对于大多数项目，这应该不是主要问题。
在这一点上，您想知道Velocity.js的使用如何影响代码库。 答案是“荒唐可笑”。 集成Velocity.js所需要做的就是下载它并将其包含在我们要使用的网页中。 最后一步是用替换每次出现的 而不更改任何参数！ 此更改就像在我们的文本编辑器或所选的IDE中执行搜索和替换一样容易。
完成后，我们的动画将立即提高性能。 这很棒，因为我们可以在不影响代码库的情况下重用我们的知识。 另外，由于它是一个保持可链接性的jQuery插件，我们可以继续创建典型的jQuery“方法调用链”。
在本文中，我描述了一些影响基于jQuery的动画的问题。 我们已经讨论了为什么CSS动画在过去几年中被大量使用，以替代jQuery。 然后，我重点介绍了CSS的一些局限性以及性能方面的一些弊端。 最后，我向您简要介绍了Velocity.js，这是一个jQuery插件，可让您几乎无需更改源代码即可提高JavaScript动画和效果的性能。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery