requestAnimationFrame、requestIdleCallback 作用？
简明要点
text
二者均为浏览器提供的调度能力，但优先级与绑定对象不同：
• requestAnimationFrame（rAF）：在下一次重绘之前执行回调，节奏与显示器刷新率对齐（常见 60Hz），适合做动画与视图更新，减少撕裂与无效布局。
• requestIdleCallback（rIC）：在浏览器一帧内尚有剩余时间时执行低优先级回调，适合日志上报、切片任务等非紧急工作。
与 setTimeout 的本质区别：二者与「渲染流水线」强相关；合理使用可减少掉帧与长时间占用主线程。
补充：React Fiber 的调度思想类似「把渲染切成小片」，但 Scheduler 并不等价于浏览器原生 rIC；Safari 对 requestIdleCallback 支持较晚，生产代码需谨慎兜底。详细说明
requestAnimationFrame（rAF）
- 作用：在浏览器下一次 绘制（paint） 前调用回调，常用于动画与滚动驱动的视图更新。
- 时机：与刷新率相关（如 60Hz 约每 16.7ms 一次）；回调接收高精度时间戳参数（DOMHighResTimeStamp），便于插值。
- 注意：回调执行过久仍会阻塞后续绘制；重逻辑应拆分到
requestIdleCallback、Web Worker 或分帧处理。
requestIdleCallback（rIC）
- 作用：在 当前帧渲染完成后，若仍有空闲时间则执行；可为超时参数设定兜底期限。
- 用途：预加载、埋点上报、将长任务切片执行等 非关键路径 工作。
- 兼容性：若目标环境不支持或不可靠，可用
setTimeout(0)链式分片 或MessageChannel作为降级策略。
一帧内大致顺序（示意）
text
输入事件 → 宏任务/微任务 → rAF → 样式计算 → 布局 → 绘制 → 合成
↑ 空闲时可执行 rIC对比小结
| 维度 | requestAnimationFrame | requestIdleCallback |
|---|---|---|
| 优先级 | 高（跟帧走） | 低（有空才跑） |
| 是否保证执行 | 每帧尽量调用一次注册队列 | 繁忙时可推迟或跳过 |
| 典型用途 | 动画、跟随滚动的布局读取 | 上报、切片计算 |
实践提示
- resize / scroll：可用 rAF 节流常见回调，避免一帧内重复读写布局引发抖动。
- 长任务：拆分为多帧；避免在 rAF 里做大量同步 DOM 写入与同步测量交替（布局抖动）。