核心是将长任务拆分为不超过50ms的小块，通过setTimeout、queueMicrotask、requestIdleCallback等机制主动让出控制权，避免Long Task导致掉帧与输入延迟。
核心是不让任何同步任务连续占用主线程超过 50ms。事件循环本身不提速，而是靠“主动让出控制权”来保障页面不卡、交互不断、渲染不丢帧。
识别并拆分长任务
遍历万级数组、解析大 JSON、一次性插入几百个 DOM 节点——这些操作若同步执行，很容易突破 50ms 阈值，变成浏览器标记的 Long Task，直接导致掉帧和输入延迟。
- 用 setTimeout(fn, 0) 把大任务切成小块，每处理 100~200 项就让出一次控制权，下一轮宏任务继续
- 对需要更及时响应的轻量后续动作（比如状态校验、数据归一化），改用 queueMicrotask，它在当前宏任务末尾立刻执行，又不干扰 Promise 链逻辑
- 涉及 UI 渲染的批量操作（如虚拟列表滚动加载），优先用 requestIdleCallback，它只在浏览器空闲时运行，支持中断与超时，比 setTimeout 更友好
管好微任务和宏任务的节奏
微任务（Promise.then、queueMicrotask）会在每个宏任务结束后**批量清空**；宏任务（setTimeout、I/O 回调）则排队等下一轮事件循环。这个顺序差一点，体验就差一截。
- 别在 Promise 链里连写十几个 .then —— 微任务堆积会拖慢后续渲染，用户点击后要等很久才看到反馈
- 日志上报、非关键动画补帧、埋点统计这类“做了挺好，不做也不影响主流程”的事，放进 setTimeout(, 0)，让它让位于 UI 更新
- 想确保某段逻辑在 DOM 更新后立即执行（比如测量元素尺寸），用 Promise.resolve().then() 或 queueMicrotask，它们比 setTimeout 更快触达
警惕那些“看起来很轻”的同步阻塞
有些操作没有网络、没有循环，却一样会锁死主线程：document.write、同步 XHR、getComputedStyle 强制重排、JSON.parse 大字符串、甚至某些 DOM 属性读取（如 offsetHeight）——它们都不可中断，且在主线程上同步完成。
立即学习“Java免费学习笔记（深入）”；
- 避免在循环中反复读写同一组 DOM 属性，批量读、批量写，或用 getBoundingClientRect 替代多次 offsetTop/offsetLeft
- 大 JSON 解析尽量交给 Web Worker，或用 streaming JSON parser 分片处理
- 用 requestAnimationFrame 包裹动画相关 DOM 更新，确保它跑在下一帧渲染前，不被其他任务挤掉
用工具定位真实瓶颈
别靠猜。打开 Chrome DevTools 的 Performance 面板 录制操作，红色长条就是长任务；或者用 PerformanceObserver 监听 longtask 事件：
<script>
const observer = new PerformanceObserver(list => {
list.getEntries().forEach(entry =>
console.log(`长任务：${entry.duration.toFixed(1)}ms`)
);
});
observer.observe({ entryTypes: ["longtask"] });
</script>
重点关注总阻塞时间（TBT）和输入延迟（Input Delay），它们比 FPS 更直接反映用户感知的卡顿。
