前言
定时器仍然是javascript动画的核心技术。 动画循环编程的关键是了解延迟多长合适。 一方面，循环间隔必须足够短，使不同的动画效果变得流畅； 另一方面，循环间隔必须足够长，以确保浏览器有能力呈现所产生的更改。
大多数笔记本电脑显示器刷新率为 60Hz，大致相当于每秒重绘 60 次。 大多数浏览器都会限制重绘操作，不超过显示的重绘频率，因为即使超过频率，用户体验也不会得到改善。 因此，最平滑动画的最佳循环间隔是 1000ms/60，大约等于 16.6ms。
setTimeout 和 setInterval 的问题是它们不精确。 它们的内部运行机制决定了时间间隔参数实际上只是指定将动画代码添加到浏览器UI线程队列中等待执行的时间。 如果其他任务已经添加到队列后面，则直到上述任务完成后才会执行动画代码。
requestAnimationFrame采用系统时间间隔，保持最佳的渲染效率，不会因为间隔时间太短而造成过度绘制，降低成本； 也不会因为间隔时间过长而导致动画的使用卡住html自动刷新，使各类网页动画能够有效的有统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。
特征
requestAnimationFrame会将所有的DOM操作集中在每一帧中，并在一次重绘或回流中完成，但重绘或回流的时间间隔紧密跟随浏览器的刷新频率。
在隐藏或不可见的元素中，requestAnimationFrame不会重绘或回流，这实际上意味着更少的CPU、GPU和视频内存使用。
requestAnimationFrame是浏览器提供的专门用于动画的API。 浏览器会在运行时手动优化调用，但如果页面没有激活，则会手动暂停动画，有效节省CPU成本。
用法
requestAnimationFrame方法以回调为参数，弹跳函数会传入一个参数，DOMHighResTimeStamp，表示触发requestAnimationFrame()排序的弹跳函数的时间。 返回值是请求ID，代表退回列表中的唯一标识符。 您可以将此值传递给 window.cancelAnimationFrame() 以取消弹跳功能。
通过该API，可以在下次重新渲染时执行单独的代码html自动刷新，以防止短时间内触发大量回流。
比如页面滚动（scroll）的弹跳功能就非常适合使用这个API，弹跳操作会被推迟到下一次重新渲染。 但需要注意的是requestAnimationFrame并不管理bounce函数，即在bounce执行之前多次调用同一个动画函数的requestAnimationFrame会导致bounce在同一帧中执行多次。 最简单的，可以使用节流函数来解决这个问题，也可以想办法让requestAnimationFrame队列中的同一个bounce函数只有一个：
事实上，最好的应用场景还是在帧动画中，它可以大幅优化性能。
笔问题
如何渲染数万数据而不卡在界面
这题考察的是如何渲染数据而不卡在页面上，也就是说不能一次性渲染几万个item，但是应该一次性渲染部分DOM，这样可以每次刷新一次通过 requestAnimationFrame 需要 16 毫秒。
兼容性
一些旧的浏览器不支持这个api。 为了使用这个api，可以自定义这个方法，挂载在window下：
发表评论