javascript单线程下避免卡顿的关键是确保单一任务不超过50ms，核心策略为拆（分块执行）、移（web worker）、换（原生异步api）、控（性能监控），配合queuemicrotask或settimeout让出主线程。
javascript 是单线程的，事件循环一旦被长时间占用，页面就会卡顿、响应延迟、动画掉帧。避免阻塞的关键不是“不用同步代码”，而是不让任何单一任务霸占主线程超过 50ms（约 3 帧）。核心思路是：拆、移、换、控。
把大任务切成小块，主动让出主线程
遍历十万条数据、校验大量表单、递归深度解析——这类操作别一口气干完。每次处理 100～1000 项后，用 queueMicrotask 或 setTimeout(..., 0) 把下一批推入队列。
- queueMicrotask：适合需要尽快连续执行、且不希望中间插入渲染的场景（比如批量 DOM 更新前的计算）
- setTimeout：属于宏任务，能确保浏览器有机会完成一次渲染和响应用户输入，更稳妥
- 示例：处理 8 万条日志，每 200 条为一组，组间插入
queueMicrotask(() => nextChunk())
把纯计算挪到 Web Worker 里
图像滤镜、加密解密、大数据排序、JSON 解析超大字符串——这些 CPU 密集型任务根本不该出现在主线程。
- Worker 中无法访问 DOM、
window、document，但可以运行任意 JS 计算逻辑 - 主线程用
postMessage发送数据，Worker 处理完再postMessage回结果 - 对流式数据（如大 JSON），可在 Worker 内部分片解析，边算边发中间结果给主线程
优先使用浏览器原生异步 API
很多“看起来必须同步”的操作，其实已有非阻塞方案，直接用比自己手写更可靠。
- 读文件：用
fetch().then(r => r.arrayBuffer())或stream().getReader()，别用XMLHttpRequest.responseType = 'text'一次性加载整段字符串 - 解析 JSON：超大文本时避开
JSON.parse(str)，改用流式解析库（如oblivious-json）或 Service Worker 预处理 - 正则匹配长文本：用
RegExp.prototype.exec循环 +lastIndex控制进度，配合setTimeout让出控制权，别用str.match(/./g)
监控并定位真实瓶颈
凭感觉优化容易跑偏。用浏览器提供的工具确认哪里真花了时间。
- 启用 Long Tasks API：用
PerformanceObserver监听耗时 ≥ 50ms 的任务，精准定位卡点 - 搭配 DevTools 的 Performance 面板 录制运行过程，查看调用栈、帧率、主线程占用情况
- Node.js 环境可用
perf_hooks模块监控事件循环延迟，识别 CPU 或 I/O 压力源
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
