在 Web 开发中，JavaScript 的单线程机制常常导致长时间运行的任务阻塞 UI 渲染，直接影响用户体验。HTML5 引入的 Web Workers 正是解决这一痛点的利器，它让脚本能在后台线程中独立运行。
什么是 Web Workers？
Web Workers 是一种 Web API，支持创建独立的后台线程执行 JavaScript 代码。这些线程与主线程隔离，不会干扰 UI 更新，非常适合处理复杂计算或数据清洗。
主要特性包括：
- 运行在独立线程，不阻塞主线程
- 无法直接访问 DOM 对象（如 document、window）
- 通过 postMessage() 进行跨线程通信
- 仅能通过 self 访问部分全局对象（如 setTimeout、fetch、IndexedDB）
- 受同源策略限制，不能加载跨域脚本
如何使用 Web Workers？
创建 Worker 文件
首先需要编写一个独立的 JavaScript 文件，例如 worker.js。在这个文件中，我们需要监听主线程发来的消息并处理结果：
self.onmessage = function(event) {
let result = event.data * 2; // 简单的计算
self.postMessage(result); // 发送回主线程
};
在主线程中调用
接下来，在主线程中实例化 Worker 并建立通信：
// 创建 Worker 实例
let worker = new Worker('worker.js');
// 监听 Worker 返回的数据
worker.onmessage = function(event) {
console.log("Worker 计算结果:", event.data);
};
// 发送数据到 Worker
worker.postMessage(10);
高级应用技巧
使用 Blob 创建 Worker
如果不想维护额外的文件，可以直接利用 Blob 对象将代码嵌入主线程：
const workerScript = `
self.onmessage = function(event) {
let result = event.data * 2;
self.postMessage(result);
};
`;
const blob = ([workerScript], { : });
worker = (.(blob));
worker. = () {
.(, event.);
};
worker.();
