分片渲染是在虚拟滚动中将批量DOM操作（如200个item）按每帧10~20个拆分，通过requestAnimationFrame逐帧执行，避免长任务阻塞主线程，实现流畅渐进式渲染。
虚拟滚动本身不直接“分片渲染”，它通过只渲染可视区域内的元素来减少 DOM 节点数量；所谓“分片渲染”通常是为缓解长列表首次挂载或快速滚动时的主线程压力，而将渲染任务拆成小块、逐帧执行。结合 requestAnimationFrame（rAF），可以实现流畅、不卡顿的渐进式渲染，避免 JS 长任务阻塞渲染帧。
什么是“分片渲染”在虚拟滚动中的实际含义？
它不是把一个 item 拆成多段画，而是把一批本该同步创建/更新的 DOM 节点（比如 200 个待挂载的 item），按每帧最多处理 N 个（如 10~20 个）的方式，分散到多个 rAF 帧中完成。这样每一帧的 JS 执行时间可控（
典型适用场景：
- 初始化加载超长列表（如 10 万条数据），避免 mount 阶段卡死
- 用户拖动滚动条后，视图突变需批量更新大量 DOM（例如从顶部瞬间滚到底部）
- 服务端返回新数据后，需要增量 patch 大量 item 节点
用 requestAnimationFrame 实现分片渲染的核心逻辑
关键不是“一帧做一点”，而是“确保每帧只做确定量的工作 + 主动让出控制权”。常用模式是递归调用 rAF，并在每次回调中处理固定数量的节点：
- 维护一个待处理的 DOM 操作队列（如 documentFragment 或 createElement 列表）
- 每次 rAF 回调中取出前 K 个任务执行（如 appendChild、设置 innerHTML）
- 若队列未空，再次 requestAnimationFrame 继续；否则结束
- 配合节流：滚动中暂停分片，停止后恢复；或检测帧时间超限（performance.now）时主动 break
示例片段（简化）：
function scheduleChunkedRender(queue, chunkSize = 15) {
let index = 0;
function renderFrame() {
const start = performance.now();
while (index < queue.length && performance.now() - start < 10) {
queue[index].render(); // 如：el.appendChild(itemEl)
index++;
}
if (index < queue.length) {
requestAnimationFrame(renderFrame);
}
}
requestAnimationFrame(renderFrame);
}
与虚拟滚动的协同要点
分片渲染是“补充策略”，不能替代虚拟滚动的核心机制（位置计算 + 只渲染 viewport 内节点）。二者需配合：
- 仅对当前应显示的那批 item（即已算出的 visibleStart ~ visibleEnd 区间）启用分片，而非全量数据
- 滚动过程中禁用分片，优先保障 scroll 事件响应和位置重算；静止后再异步补全 DOM（可加防抖）
- 复用已有 DOM（如使用 key + diff）比反复分片创建更高效；分片更适合首屏冷启动或大数据量动态插入
- 注意 CSS 渲染层：每个分片帧末尾触发 layout / paint 是自然的，但避免在分片中频繁读取 offsetHeight 等触发强制同步布局
比 requestAnimationFrame 更进一步的优化选项
rAF 是基础，但在极端场景下可叠加其他手段：
- IntersectionObserver：用于懒渲染“接近 viewport”的预备区域（如前后各 5 行），比纯 rAF 更语义化、更低开销
- Web Worker：将数据映射、模板字符串拼接等纯计算任务移出主线程，再 postMessage 传 DOM 片段
- OffscreenCanvas 或 CSS Containment：对复杂 item 内容做渲染隔离，避免样式/布局污染全局
- 细粒度更新 + shouldComponentUpdate 类机制：React/Vue 中结合 memoization，确保只有真实变化的 item 触发分片更新
