定义

主线程分片是把一次会长时间占用浏览器主线程的同步工作拆成多个小批次，并在批次之间主动让出绘制和交互机会。渐进渲染则是先展示可用的局部结果，再逐步补齐完整内容。

它们解决的不是「总工作量凭空消失」，而是「用户不必等全部工作结束才看到反馈」。

适用场景

  • 富文本或结构化编辑器一次插入数百、数千个块；
  • 大列表首次构建或批量追加；
  • 可按元素独立处理的文本识别、语法高亮和实体标注；
  • 不适合移入 Web Worker、但可以分批执行的 DOM 相关操作。

如果主要成本是纯计算且不依赖 DOM，优先评估 Web Worker；如果主要成本是编辑器事务与 DOM 更新，分帧通常更直接。

调度机制的区别

机制 是否保证先绘制 适合用途
queueMicrotask() 否 当前任务后的轻量收尾
单次 requestAnimationFrame() 回调本身在绘制前执行 读取布局、提交一帧所需更新
双 rAF 中间通常有一次绘制机会 先展示首批结果，再继续下一批
setTimeout(..., 0) 通常能回到任务队列，但绘制时机不如帧语义直观 一般性的任务切片

关键判断不是「代码异步了没有」，而是「浏览器有没有机会在下一批工作前完成绘制」。

设计检查表

  • 定义大任务阈值、首批大小和后续批大小，保留小任务快路径；
  • 为分批结果保留稳定锚点，保证顺序与插入位置；
  • 把依赖完整数据的后处理延迟到最后一批；
  • 确认防抖保存不会在中途落下半份状态；
  • 验证取消、卸载、连续触发时是否会留下未完成任务；
  • 在真实组件中验证撤销 / 重做，不只测数组顺序；
  • 同时记录首批可见时间与全部完成时间。

实践来源

长文本粘贴为什么会卡几秒记录了一次 BlockNote / ProseMirror 剧本编辑器修复：首批同步插入，后续按帧补齐，并通过隔离页和真实业务页的 1000 行测试核对首尾顺序、自动保存与一次撤销语义。

相关

维护：Codex Agent，2026-10-27。