如何渲染几万条数据并不卡住界面？
程序员文章站
2022-07-09 20:23:13
如何渲染几万条数据并不卡住界面？ 如何在不卡住页面的情况下渲染数据，也就是说不能一次性将几万条 都渲染出来，而应该一次渲染部分 DOM，那么就可以通过 requestAnimationFrame 来 每 16 ms 刷新一次。
如何渲染几万条数据并不卡住界面？
如何在不卡住页面的情况下渲染数据，也就是说不能一次性将几万条 都渲染出来，而应该一次渲染部分 dom，那么就可以通过 requestanimationframe 来 每 16 ms 刷新一次。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
</head>
<body>
<ul>控件</ul>
<script>
settimeout(() => {
// 插入十万条数据
const total = 100000
// 一次插入 20 条，如果觉得性能不好就减少
const once = 20
// 渲染数据总共需要几次
const loopcount = total / once
let countofrender = 0
let ul = document.queryselector("ul");
function add() {
// 优化性能，插入不会造成回流
const fragment = document.createdocumentfragment();
for (let i = 0; i < once; i++) {
const li = document.createelement("li");
li.innertext = math.floor(math.random() * total);
fragment.appendchild(li);
}
ul.appendchild(fragment);
countofrender += 1;
loop();
}
function loop() {
if (countofrender < loopcount) {
window.requestanimationframe(add);
}
}
loop();
}, 0);
</script>
</body>
</html>
上一篇： vue跨域配置