「前端进阶」高性能渲染十万条数据(时间分片)，linux虚拟机使用教程

使用定时器

---

从上面的例子，我们已经知道，页面的卡顿是由于同时渲染大量DOM所引起的，所以我们考虑将渲染过程分批进行

在这里，我们使用setTimeout来实现分批渲染

复制代码

//需要插入的容器

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

setTimeout(()=>{

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 &#