HTML5 Web Workers 实战：解决主线程阻塞与性能优化
在 Web 开发里，JavaScript 的单线程特性是个双刃剑。虽然简单，但一旦遇到繁重的计算，主线程就会被占满，导致页面卡顿甚至无响应。为了解决这个痛点，HTML5 引入了 Web Workers，让脚本能在后台线程中独立运行，把耗时任务从 UI 渲染中剥离出来。
什么是 Web Workers？
简单来说，Web Workers 是浏览器提供的 API，允许你创建独立的后台线程执行 JavaScript。这些线程不干扰主线程的 UI 更新，非常适合处理复杂计算或数据清洗。
核心特点包括：
- 运行在独立线程，不阻塞主线程
- 无法直接操作 DOM（如
document、window） - 通过
postMessage()和onmessage进行通信 - 只能访问部分全局对象（如
setTimeout、fetch） - 受同源策略限制，不能跨域加载脚本
如何使用 Web Workers？
基础用法：文件方式
最标准的做法是将 Worker 逻辑放在单独的 .js 文件中。
首先，新建一个 worker.js：
self.onmessage = function(event) {
let result = event.data * 2;
self.postMessage(result);
};
然后在主线程中实例化并调用：
// 创建 Worker 实例
const worker = new Worker('worker.js');
// 监听返回结果
worker.onmessage = function(event) {
console.log("Worker 计算结果:", event.data);
};
// 发送数据
worker.postMessage(10);
进阶技巧：Blob 方式
有时候不想单独维护一个 JS 文件，可以直接用 Blob 生成 Worker URL。这在动态生成代码时特别有用：
const workerScript = `
self.onmessage = function(event) {
let result = event.data * 2;
self.postMessage(result);
};
`;
blob = ([workerScript], { : });
worker = (.(blob));
worker. = () {
.(, event.);
};
worker.();
