（理论就是分割后台数据 然后通过定时器将数据加载到虚拟dom上 加载完成后渲染一部分）
在项目中经常会碰到大量数据需要在前端页面渲染，很多时候会使用分页的功能，但是数据量过大的时候比如10万条这种的，一直滑动列表后面会出现卡顿，滑不动的现象，这时候就需要前端来做些优化
1.createDocumentFragment（）碎片节点
渲染 大数据 时，将数据分成一段一段执行，createDocumentFragment()创建一个虚拟节点对象，将一部分数据先添加到DocumentFragment中，再统一将DocumentFragment添加到页面，会减少页面渲染DOM的次数，效率会明显提升
<body>
<ul></ul>
<script>
const total = 100000; // 插入十万条数据
const onceCount = 50; // 每次插入50条数据
const sumCount = Math.ceil(total/onceCount); // 插入数据需要的次数
var renderCount = 0; // 渲染次数
var ul = document.querySelector("ul"); // 获取要插入数据的父节点
function add(){ // 添加数据方法
var fragment = document.createDocumentFragment(); // 创建虚拟节点
for( let i=0; i<onceCount; i++){
var li = document.createElement("li");
li.innerHTML = Math.floor(Math.random()*100000);
fragment.appendChild(li); // 插入虚拟节点不消耗性能
}
ul.appendChild(fragment);
renderCount++;
loop();
}
function loop(){
if(renderCount<sumCount){
window.requestAnimationFrame(add)
}
}
loop();
</script>
</body>
2.requestAnimationFrame（）
上面的代码中使用到了requestAnimationFrame（）， 实现动画效果的方法比较多，javascript中可以通过定时器setTimeout来实现，css3可以使用transition和animation来实现，html5中的canvas也可以实现。除此之外html5还提供一个专门用于请求动画的API, 即requestAnimationFrame(rAF), 直译就是 “请求动画帧”
requestAnimationFrame比起setTimeout,setInterval的优势主要是两点:
requestAnimationFrame会把每一帧中的所有dom操作集中起来,在一次重绘和回流中完成,并且重绘或回流的时间间隔紧紧会随浏览器的刷新频率,一般来说频率为每帧60秒 在隐藏不可见元素中,requestAnimationFrame将不会进行重绘或回流.有更少的cpu,gpu和内存使用量.
那就是说，rAF的执行步伐跟着系统的绘制频率走， 它能保证回调函数在屏幕每一次的绘制间隔中只被执行一次, 这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题