<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul></ul>
<script>
// 插入 10万条数据
const total = 100000;
// 每次插入 20条数据
const once = 20;
// 插入都数据需要都次数
const loopCount = Math.ceil(total/once);
// 渲染的次数
let countRender = 0;
const ul = document.querySelector(‘ul‘);
// 添加数据的方法
function add(){
// 创建虚拟节点
const fragment = document.createDocumentFragment();
for(let i=0;i<once;i++){
const li = document.createElement(‘li‘);
li.innerHTML = Math.floor(Math.random()*100000)
fragment.appendChild(li)
}
ul.appendChild(fragment)
countRender++;
loop();
}
function loop(){
if(countRender < loopCount){
window.requestAnimationFrame(add)
}
}
loop();
</script>
</body>
</html>
原文：https://www.cnblogs.com/eric-share/p/14076217.html