点击右上方红色按钮关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

众所周知，CSS3动画的性能很是不错，这也是在日常需求中大量使用其的原因。但是在开发过程中，有时我们又不得不选择JavaScript来实现动画效果。

CSS3动画可控性太弱，只能完成一些预设好的动画效果，而JavaScript可以在其动画过程中对其进行很好的控制。有一些复杂点的动画可以通过JavaScript来实现，然而，由于JavaScript动画发生在浏览器的主线程中，这个线程通常十分繁忙，这就导致JavaScript动画如果处理不当，很多时候会导致页面卡顿。

所以，今天，这里我来简单总结几条可以优化JavaScript动画卡顿的方式方法。

一. 避免布局颠簸

JavaScript对DOM持续的进行获取和设置操作，如处理不当，会导致UI性能的降低。

举个例子，如下代码：

上面这段代码，分离了获取和设置操作，不能利用，浏览器对于同一时间的一系列操作可以优化为一个单一的操作的能力从而导致性能问题，所以可以优化为下面这样：

二. 对于动画

对于使用setTimeout和setInterval进行动画调用时，不合理的时间设置也会导致页面卡顿，可以改用另一个方法requestAnimationFrame，这样动画的绘制交由浏览器绘制请求，避免刷新间隔之间插入绘制请求导致丟帧出现卡顿感。如下代码所示：

三. 使用函数节流

使用函数节流是一个非常重要的性能优化点，我们先来分析一下，为什么要使用函数节流。

在浏览器中有一类事件，如scroll和resize事件触发非常频繁，但是实际用户不需要感知这么多的事件产生，造成大量函数触发，而如果这些函数与动画有关，会给浏览器造成大压力，节流函数就可以很好地解决这个问题。

四. 善于利用第三方库

如果要对JavaScript动画进行更方便地优化，可以选择用一些优秀的第三方动画库，如Velocity.js。这类JavaScript库的调用与开发者熟悉的jQuery等十分接近，而从库的层面进行的大量优化，对于开发都来说以较松的方式获得了更优秀的性能。