JS长任务拆分核心是建立“主线程呼吸感”，通过动态切片（依设备性能与运行时调整批大小）、混合调度（宏/微任务+requestIdleCallback分层协作）、状态可续与中断感知，辅以DOM批量操作等轻量优化，确保每帧留出渲染空隙。
掌握 JS 长任务拆分的高级进阶技巧，关键不是堆砌 API，而是建立“主线程呼吸感”——让每次执行都留出足够空隙给渲染、输入和动画。真正卡顿的根源，从来不是代码多长，而是它把浏览器的 16ms 帧时间吃干抹净还不松口。
动态切片：批大小不能写死
固定每批处理 50 条，在低端机上可能单次就耗时 8ms，高端机又浪费空闲时间。必须让批大小随设备和运行时状态浮动：
- 冷启动参考 navigator.deviceMemory（如 2GB → 初始设 30）和 navigator.hardwareConcurrency（如 4 核 → 可适当加到 50）
- 每轮用 performance.now() 打点，若连续两次耗时 >2ms，自动将批大小 ×0.7
- 监听 document.visibilityState === 'hidden' 或滚动事件高频触发时，临时收紧粒度（如降为原 1/3）
- 始终设硬边界：最小不小于 10 条，最大不超过 200 条，避免震荡或过度调度
混合调度：宏任务打底，微任务串内，idle 补位
三者不是替代关系，而是分层协作：
- 宏任务（setTimeout） 是唯一能真正让出渲染权的锚点，适合做主切片边界：“处理完这批，下轮再继续”
- 微任务（queueMicrotask） 适合批内快速串联，比如校验 → 格式化 → 缓存，全程无延迟但不释放主线程；不能用来替代 setTimeout 做主切片
- requestIdleCallback 最贴近浏览器意图，但必须配 deadline.timeRemaining() > 1 判断，且强制加 { timeout: 2000 } 防止饥饿
状态可续与中断感知
拆分后任务中断再续，不是可选项，而是必选项：
- 把当前索引、中间结果、中断标志存在闭包或对象里，别依赖局部变量重置
- 对非关键后续分片，监听用户交互（如滚动、点击），用 abortController 或标记位提前退出
- 需保序操作（如事务性更新），拆成“检查点 + 增量提交”，用 await new Promise(r => setTimeout(r, 0)) 让权但保留上下文
配套轻量级优化：拆得再准，不做这些也白搭
很多卡顿来自隐性开销，和切片本身无关：
- DOM 批量操作：所有插入统一走 DocumentFragment，禁用 innerHTML 赋值，改用 element.append()
- 规避强制同步布局：禁止在循环中读取 offsetHeight、getBoundingClientRect()；位置计算尽量预生成并缓存
- 交互逻辑延迟绑定：按钮、拖拽等监听器，等节点进入视口后再用 IntersectionObserver 初始化
- contain: strict 隔离复杂模块，限制样式/布局影响范围，减少重排扩散
