高性能渲染十万条数据（时间分片）

使用 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); 

 使用 DocumentFragment

，文档片段接口，表示一个没有父级文件的最小文档对象。它被作为一个轻量版的Document

DocumentFragment
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  

　　

　　

　　

来源：博客园

作者：欢欢11

链接：https://www.cnblogs.com/huanhuan55/p/11510294.html