JS长任务拆分核心是围绕渲染机制与事件循环主动调度，以避免主线程阻塞、保障50ms内响应用户操作；需以requestIdleCallback为轴心，结合时间切片与状态保持协同实现。
JS 中长任务拆分不是单纯“切代码”，而是围绕浏览器渲染机制和事件循环做主动调度。核心目标是避免主线程长时间阻塞，保障页面响应性。画思维导图时，别从 API 列表开始，先锚定「为什么必须拆」——即 50ms 原则（RAIL 模型）：用户操作反馈需在 50ms 内完成，否则感知卡顿。
明确主线：以“执行时机”为轴心组织分支
长任务拆分的本质，是把同步大块逻辑，转为在空闲时段（Idle Period）或微任务/宏任务间隙中分片执行。导图中心节点应是「requestIdleCallback + 任务切片 + 状态保持」三者协同，而非孤立罗列函数名。
- requestIdleCallback：唯一原生支持空闲调度的 API，需标注其不可靠性（可能不触发）、兼容性处理（降级为 setTimeout）和超时保底（timeout 选项必设）
- 手动切片（Task Slicing）：用 while 循环 + 时间切片（如每帧 ≤1ms）控制单次执行量，关键在“中断点识别”——数组遍历可按索引切，对象深遍历需记录路径栈
- 状态保持与恢复：每次切片后必须保存上下文（如 currentIdx、pendingTasks、stack），下次 resume 时能精准接续，避免重复或遗漏
补全边界：把“不能拆”和“不该拆”的场景标清楚
导图不能只讲怎么做，更要标出红线。有些逻辑天然不适合拆分，强行切片反而引入竞态或状态错乱。
- 涉及 DOM 批量读写混合的操作（如先 getBoundingClientRect 再 style 修改）——应合并为一个 microtask，而非拆开
- 事务性逻辑（如表单校验+提交+清空）——拆开会破坏原子性，应整体放入一个 task，靠防抖/节流控频，而非切片
- Web Worker 可接管的纯计算（如 JSON 解析、加密解密）——优先移出主线程，比 requestIdleCallback 更彻底
连到真实瓶颈：每个分支挂一个典型场景案例
脱离场景的知识点是空转。导图每个主干下，直接附带一行可运行的简化示例，强化记忆锚点。
- 大数据列表渲染：10 万条数据生成 DOM → 用 DocumentFragment 批量创建 + requestIdleCallback 分批 append
- 复杂对象深克隆：循环引用对象 clone → 改用结构化克隆（structuredClone）或 Web Worker，不走 JS 主线程切片
- 首屏 JS 初始化：框架启动+路由解析+组件预加载 → 拆成三个独立 idle 回调，按优先级设置 timeout（高优设 20ms，低优设 100ms）
真正有用的 JS 长任务导图，是能让你一眼看出“这里该用 idle 还是该扔 worker，这里切片要存什么状态，这里根本不能切”的决策图。它不追求全覆盖，而聚焦在高频出问题的交界地带。
