html数据渲染笔试题,面试题：js如何渲染十万条数据并不卡住界面

这道题考察了如何在不卡住页面的情况下渲染数据，也就是说不能一次性将几万条都渲染出来，而应该一次渲染部分 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)

本题来自于网络，所有权归其作者。