「前端进阶」高性能渲染十万条数据(时间分片)

使用 requestAnimationFrame

　　

与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。
如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象。
我们使用requestAnimationFrame来进行分批渲染：

//需要插入的容器 let ul = document.getElementById('container'); // 插入十万条数据 let total = 100000; // 一次插入 20 条 let once = 20; //总页数 let page = total/once //每条记录的索引 let index = 0; //循环加载数据 function loop(curTotal,curIndex){     if(curTotal <= 0){         return false;     }     //每页多少条     let pageCount = Math.min(curTotal , once);     window.requestAnimationFrame(function(){         for(let i = 0; i < pageCount; i++){             let li = document.createElement('li');             li.innerText = curIndex + i + ' : ' + ~~(Math.random() * total)             ul.appendChild(li)         }         loop(curTotal - pageCount,curIndex + pageCount)     }) } loop(total,index);

1	使用 DocumentFragment

  DocumentFragment，文档片段接口，表示一个没有父级文件的最小文档对象。它被作为一个轻量版的Document使用，用于存储已排好版的或尚未打理好格式的XML片段。最大的区别是因为     

      DocumentFragment不是真实DOM树的一部分，它的变化不会触发DOM树的（重新渲染) ，且不会导致性能等问题。      
     可以使用document.createDocumentFragment方法或者构造函数来创建一个空的DocumentFragment

     我们得知DocumentFragments是DOM节点，但并不是DOM树的一部分，可以认为是存在内存中的，所以将子元素插入到文档片段时不会引起页面回流。

//需要插入的容器 let ul = document.getElementById('container'); // 插入十万条数据 let total = 100000; // 一次插入 20 条 let once = 20; //总页数 let page = total/once //每条记录的索引 let index = 0; //循环加载数据 function loop(curTotal,curIndex){     if(curTotal <= 0){         return false;     }     //每页多少条     let pageCount = Math.min(curTotal , once);     window.requestAnimationFrame(function(){         let fragment = document.createDocumentFragment();         for(let i = 0; i < pageCount; i++){             let li = document.createElement('li');             li.innerText = curIndex + i + ' : ' + ~~(Math.random() * total)             fragment.appendChild(li)         }         ul.appendChild(fragment)         loop(curTotal - pageCount,curIndex + pageCount)     }) } loop(total,index);     链接：https://juejin.im/post/5d76f469f265da039a28aff7