这道题考察了如何在不卡住页面的情况下渲染数据，也就是说不能一次性将几万条都渲染出来，而应该一次渲染部分 DOM，那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js如何渲染十万条数据并不卡住界面</title>
</head>
<body>
<ul>控件</ul>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
本题来自于网络，所有权归其作者。
