JS RequestAnimationFrame（五十）

RequestAnimationFrame
requestAnimationFrame比起setTimeout、setInterval的优势主要有两点：

1. requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重回或回流中就完成，并且重绘或回流的时间间隔紧紧跟着浏览器的刷新频率，一般来说，这个频率为每秒60帧。
2. 在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的cpu、gpu和内存使用量。
3. 在运行时浏览器会自动优化方法的调用，如果页面不是激活状态，动画会自动暂停，有效节省了CPU开销。

如何停止requestAnimationFrame：可以使用cancelAnimationFrame()接收requestAnimationFrame默认返回的一个id，cancelAnimationFrame只需要传入这个id就可以停止了。

兼容性
IE9不支持，可用setTimeout兼容

应用
一般setInterval和setTimeout可实现的，rFA都可以实现，除此之外rFA还可以配合document.createDocumentFragment实现大量数据的渲染渲染大量数据

拓展
createDocumentFragment有以下几个特点：

• createDocumentFragment是用来创建一个虚拟的节点对象，或者说是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。
• DocumentFragment节点不属于文档树，继承的parentNode属性总是null，当把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点，即插入的是括号中的节点。
• 如果使用appendChild方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点