JavaScript单线程下需避免同步阻塞：拆分大任务用queueMicrotask/setTimeout、CPU密集型操作移至Web Worker、优先使用内置异步API、用Long Tasks API监控并中断超时计算。
JavaScript 是单线程运行的，长时间同步操作（如大循环、复杂计算、JSON 解析超大字符串）会完全阻塞主线程，导致页面卡顿、事件无法响应、动画掉帧。避免同步阻塞的核心思路是：把耗时任务拆分、让出控制权、交由异步机制调度。
用 setTimeout 或 queueMicrotask 拆分大任务
将一个长循环或大批量处理逻辑，切成小块执行，每块后主动让出主线程，让浏览器有机会处理渲染、用户输入等高优先级任务。
- 对数组批量处理时，每次只处理 100～1000 项，然后用
setTimeout(() => {}, 0)或queueMicrotask()调度下一批 -
queueMicrotask在当前宏任务末尾、渲染前执行，适合需尽快连续处理的场景；setTimeout属于宏任务，能确保渲染发生，更稳妥 - 示例：遍历 10 万条数据做校验，可每 500 条为一组，组间插入
queueMicrotask
将纯计算移至 Web Worker
CPU 密集型任务（如图像处理、加密解密、大数据排序/过滤）应彻底剥离主线程，交给 Web Worker 在后台线程执行。
- 主线程只负责传递数据和接收结果，不参与实际运算
- 注意：Worker 中不能访问 DOM、
window、document等主线程专属对象，通信靠postMessage - 对于可流式处理的数据（如解析大 JSON），可在 Worker 中分片解析并逐步返回中间结果
善用内置异步 API 替代手动同步实现
许多常见操作已有非阻塞方案，优先使用它们，而非自己写同步循环。
立即学习“Java免费学习笔记（深入）”；
- 用
fetch+Response.arrayBuffer()或stream().getReader()处理大文件，避免XMLHttpRequest.responseType = 'text'一次性加载整个字符串 - 解析大 JSON 时，用流式解析库（如
jsonl、oblivious-json）或 Service Worker 预处理，而不是JSON.parse(str) - 正则匹配超长文本？考虑用
RegExp.prototype.exec循环 +lastIndex控制进度，配合定时让出，避免str.match(/.../g)一次性全量匹配
监控与防御：用 Long Tasks API 主动识别问题
利用浏览器提供的 PerformanceObserver 监听超过 50ms 的长任务，定位真实瓶颈。
- 在开发和灰度环境开启监听，上报持续 >100ms 的任务堆栈（需配合 sourcemap）
- 对已知高风险函数（如初始化数据转换、第三方 SDK 启动逻辑）加轻量级中断检查：
if (i % 1000 === 0 && performance.now() - start > 20) await new Promise(r => setTimeout(r, 0)) - 构建时启用
esbuild或swc的代码分割，避免巨型 bundle 同步解析
