刷新率与执行队列
一句话结论:60Hz 屏幕一帧约 16.67ms;主线程在这段时间里既要跑 JS 又要渲染,长任务会直接造成掉帧与卡顿。
1. 帧预算与“长任务”
- 60Hz:
1000ms / 60 ≈ 16.67ms - 单次任务(或一串微任务)超过帧预算 → 输入延迟、动画掉帧
- DevTools 里常说的 Long Task,本质就是主线程被占用太久
2. 渲染大致发生在什么时候
- 常见顺序(简化):任务 → 清空微任务 → 可能渲染(样式/布局/绘制/合成)
requestAnimationFrame:通常在渲染前回调,适合读写布局做动画准备
3. 与队列的关系
- 宏任务:决定“下一段 JS 什么时候开始跑”
- 微任务:决定“本轮结束前还要追加多少 JS”
- 关键经验:不要在微任务里无止境追加微任务,否则渲染会被推迟