核心是将一次性渲染拆分为小批次以避免主线程阻塞，采用 settimeout 或 requestanimationframe 分批插入 dom，结合 documentfragment 减少重排，配合状态管理控制进度并避开常见陷阱。
核心是把一次性渲染拆成小批次，让浏览器有空隙处理用户交互和样式计算，避免主线程长时间阻塞。
用 setTimeout 分批插入 DOM
这是最轻量、兼容性最好的方式。关键不是“延迟”，而是把渲染任务推到下一个宏任务，释放当前帧。
- 每次只生成并插入固定数量（比如 20–50 条）的元素
- 用 DocumentFragment 批量暂存节点，最后一次性挂载，减少重排次数
- 递归调用时用
setTimeout(fn, 0)，不设具体毫秒值，交由事件循环调度
用 requestAnimationFrame 控制渲染节奏
更适合动画或滚动场景，能严格对齐屏幕刷新率（约每 16.7ms 一帧），视觉更顺滑。
- 在
requestAnimationFrame回调里执行单批次渲染 - 配合节流判断：如果上一批刚完成，且距离下一帧还有余量，就继续；否则等下一帧
- 比
setTimeout更精准，但需注意不能在回调里做耗时计算
结合状态管理控制渲染进度
避免“一口气干完”或“卡在中间”，需要明确的起始、分片、结束逻辑。
- 维护 当前索引 和 总条数，每次推进固定偏移量
- 渲染前检查是否已终止（如用户切换页面、取消操作）
- 可叠加加载态提示，比如每完成一批更新进度条或显示“已加载 X/总条数”
避开常见陷阱
分片本身不等于性能提升，错误用法反而加重负担。
- 别在循环里直接
appendChild到真实 DOM——这会触发多次重排 - 批次大小不宜过小（100），20–50 是较优平衡点
- 不要用
setInterval简单轮询，它不感知渲染是否完成，容易堆积任务 - 数据量极大时（如 50 万+），建议配合虚拟滚动，只渲染可视区域
