//插入十万条数据
const total = 100000;
//每一次插入20条数据
const once= 20;
//插入的数据需要的次数
const loopCount= Math.ceil(total/once);
//渲染的次数
let countRender= 0;
const ul = document.querySelector("ul");
//添加数据的方法
function add(){
//创建虚拟节点
const fragment = document.createDocumentFragment();
for(let i= 0; i< once; i++){
const li = document.createElement("li");
li.innerHTML = Math.floor(Math.random()*100000)
fragment.appendChild(li);
}
ul.appendChild(fragment);
countRender++;
loop();
}
function loop(){
if(countRender < loopCount){
window.requestAnimationFrame(add); //requestAnimationFrame:请求动画帧
}
}
loop()渲染十万条数据 浏览器不卡顿
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 根据题意，如果我们一次性渲染刷新几万条数据，页面会卡顿，因此只能分批渲染，既然知道原理我们就可以使用setInte...
- 作者：TalkingData 李志刚 本文由TalkingData原创，转载请获取授权。 李志刚：近几个月在开发一...
- 这里我要感谢 pl-table的作者，引导我在NUXT下安装成功。（pl-table版本：2.5.8） 2.4.6...
