列表渲染一百万的节点，要求秒开，怎么办呢？
首先瓶颈在回流上。增加节点会导致dom树不断回流，这个问题比较容易解决，用createDocumentFragment一次性追加即可，这样只需回流一次。
为了保证其流畅性，可以结合requestAnimationFrame来做，因为网页刷新频率在16ms左右，我们可以在每帧都做这个追加动作，用一个全局变量记录断点，这样就可以在不断刷新的过程中，把节点流畅的展示出来了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>
const container = document.getElementById('container'); // 假设这是你的容器元素
const totalNodes = 1000000; // 总共需要渲染的节点数
const batchSize = 1000; // 每批处理的节点数
let nodesCreated = 0; // 已创建的节点数
function createNode(batchSize) {
const fragment = document.createDocumentFragment();
for (let i = 0; i < batchSize; i++) {
const div = document.createElement('div');
div.textContent = `Node ${nodesCreated + i}`;
fragment.appendChild(div);
}
container.appendChild(fragment);
nodesCreated += batchSize;
}
function renderNodes() {
// 如果还有节点需要创建，则继续创建下一批
if (nodesCreated < totalNodes) {
createNode(batchSize);
// 使用requestAnimationFrame来确保在浏览器的下一个绘制周期中执行
requestAnimationFrame(renderNodes);
}
}
// 开始渲染节点
renderNodes();
</script>
