大数据量处理

一、渲染

1. DocumentFragment

使用DocumentFragment保存新增的节点最后一次性插入。创建方法：document.createDocumentFragment()

2. setTimeout

由于一个长时任务会导致页面看起来卡顿，可以使用setTimeout拆分为多个任务，因为任务【之间】可以更新UI。将数据分页，每次setTimeout渲染一页数据

3. 用requestAnimationFrame替换setTimeout

setTimeout和setInterval的问题是，它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务，那代码就要等前面的任务完成后再执行。

requestAnimationFrame采用系统时间间隔，保持最佳绘制效率，不会因为间隔时间过短，造成过度绘制，增加开销；也不会因为间隔时间太长，使用动画卡顿不流畅，让各种网页动画效果能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果

    【1】requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率

　【2】在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量

　【3】requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销

4. 懒加载

【1】在列表底部放一个blank节点，当此节点出现在视图中时再加载下一页

【2】在或者判断滚动到最底部时加载下一页，判断 parent.scrollTop + parent.clientHeight >= parent.scrollHeight