本文共 648 字,大约阅读时间需要 2 分钟。
这道题考察了如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次。
代码如下:
js如何渲染十万条数据并不卡住界面setTimeout(() => {
let data = 100000;
let once = 20;
let num = data/once;
let currentIndex = 0;
let ul = document.querySelector('ul');
let frameagent = document.createDocumentFragment();
function add(){
for (var i = 0; i < once; i++) {
let li = document.createElement('li');
li.innerText = Math.floor(Math.random() * data);
frameagent.appendChild(li);
}
currentIndex += 1;
ul.appendChild(frameagent);
loop();
}
function loop(){
if(currentIndex < num){
window.requestAnimationFrame(add);
}
}
loop();
},0)
本题来自于网络,所有权归其作者。
转载地址:http://fhnuo.baihongyu.com/