以往JS控制的动画大多使用setInterval 或者setTimeout 每隔一段时间刷新元素的位置，来达到动画的效果，但是这种方式并不能准确地控制动画帧率，尽管主流的浏览器对于这两个函数实现的动画都有一定的优化，但是这依然无法弥补它们性能问题。主要原因是因为JavaScript的单线程机制使得其可能在有阻塞的情况下无法精确到毫秒触发。
requestAnimationFrame()方法正是为了满足高性能动画的需求而提供的API，通过setInterval方法控制的动画其调用的间隔由程序员设置，而requestAnimationFrame()无须设置调用间隔， 它自动紧跟浏览器的绘制的帧率（一般浏览器的显示帧率是60fps，差不多每帧间隔16.7ms）
关于过去的setInterval控制的动画与requestAnimationFrame()的效果的对比
setInterval动画DEMO
requestAnimationFrame动画DEMO
点击预览以上两个demo可以明显感受到前者有点卡顿，后者更为流畅。
另外requestAnimationFrame()在隐藏或不可见的元素中将不会进行重绘或回流，大大降低了开销。关于该方法的其他细节见MDN文档
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
