使用Document.createDocumentFragment。
DocumentFragments (en-US) 是 DOM 节点。它们不是主 DOM 树的一部分。通常的用例是创建文档片段,将元素附加到文档片段,然后将文档片段附加到 DOM 树。在 DOM 树中,文档片段被其所有的子元素所代替。
因为文档片段存在于内存中,并不在 DOM 树中,所以将子元素插入到文档片段时不会引起页面回流(对元素位置和几何上的计算)。因此,使用文档片段通常会带来更好的性能。 -MDN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>控件</ul>
<script>
setTimeout(() => {
// 总条数
const total = 100;
// 单次渲染数量
const once = 20;
// 渲染总次数
const loopCount = total / once;
// 当前渲染次数
let renderCount = 0;
// dom
let ul = document.querySelector('ul');
const 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);
}
renderCount++;
ul.appendChild(fragment);
loop();
}
const loop = () => {
if (renderCount < loopCount) {
window.requestAnimationFrame(add);
}
};
loop();
}, 0);
</script>
</body>
</html>