核心思路是将长耗时任务拆分为小块以释放主线程。可用setTimeout分片执行纯计算类任务，配合isInputPending()判断用户输入；动画相关优先用requestAnimationFrame；CPU密集型任务移交Web Worker；低优先级任务使用requestIdleCallback。
直接把长耗时任务拆开，让浏览器有空处理渲染和用户操作，是核心思路。不拆，主线程就一直被占着，页面会卡死、点击无反应、动画掉帧。
用 setTimeout 分片执行
适合纯计算、数据转换、批量 DOM 更新等场景。把大任务切成小块，每块执行完主动让出主线程，等下一轮事件循环再继续。
- 设定合理 chunkSize（比如每次处理 100–500 项），避免单次执行超 50ms
- 递归调用 setTimeout，而不是 for 循环里塞一堆 setTimeout，否则容易失控
- 可在每次分片后检查是否需暂停：比如用 navigator.scheduling.isInputPending() 判断用户是否正在输入或点击（注意兼容性）
用 requestAnimationFrame 处理动画或视觉更新
当任务和界面重绘强相关（比如滚动加载、Canvas 动画、逐帧渲染），优先选 requestAnimationFrame。它保证在下一帧绘制前执行，节奏和屏幕刷新同步。
- 比 setTimeout 更精准控制时机，避免丢帧
- 适合需要平滑过渡的 UI 变化，比如列表滚动中动态渲染可见区域
- 不适合后台计算——它依赖渲染帧，页面不可见时可能被节流甚至暂停
用 Web Worker 搞纯计算
遇到大量数学运算、图像处理、JSON 解析、加密解密等 CPU 密集型任务，别让它进主线程。Web Worker 在独立线程运行，完全不干扰页面响应。
立即学习“Java免费学习笔记（深入）”；
- Worker 里不能操作 DOM、不能访问 window/document，只负责计算并 postMessage 返回结果
- 主线程收消息后再更新 UI，实现“计算与渲染分离”
- 初始化开销略大，适合持续或较重的计算，不是简单几行代码就上 Worker
用 requestIdleCallback 做低优先级清理
适合日志上报、缓存清理、非关键状态同步这类“有空再做”的事。它会在浏览器空闲时段自动调度，不影响用户交互和渲染。
- 回调函数接收 deadline 对象，可通过 deadline.timeRemaining() > 0 判断还能执行多久
- 若时间不够，可暂存任务，等下次空闲再继续
- 兼容性要注意：Safari 支持较晚，可用 setTimeout 降级兜底
不复杂但容易忽略：拆分不是硬切数字，而是看实际执行耗时 + 用户感知。优先保交互、保渲染，再谈完成效率。
