引言
在 Web 开发中，JavaScript 是单线程运行的，这意味着它在执行任务时会阻塞 UI 渲染，影响用户体验。为了解决这个问题，HTML5 引入了 Web Workers，允许 JavaScript 在后台线程中运行，从而提升页面的性能和响应速度。
什么是 Web Workers？
Web Workers 是 HTML5 提供的一种 Web API，它允许开发者创建独立的后台线程来执行 JavaScript 代码。这些线程独立于主线程运行，不会阻塞 UI 渲染，适用于处理复杂计算、数据处理等耗时任务。
核心特点
- 运行在单独的线程，不会阻塞主线程
- 不能直接操作 DOM（即 document、window 等对象不可用）
- 通过 postMessage() 与主线程通信
- 只能通过 self 访问部分全局对象，如 setTimeout、fetch、IndexedDB 等
- 受同源策略限制，不能跨域加载脚本
Web Workers 的使用方式
创建一个 Worker
Web Worker 需要在一个独立的 JavaScript 文件中编写，然后在主线程中创建并调用它。
准备 Worker 文件
新建一个 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
在某些情况下，我们可能不希望单独创建 worker.js 文件，而是直接在主线程中创建 Worker。可以使用 Blob 方式实现：
const workerScript = ;
blob = ([workerScript], { : });
worker = (.(blob));
worker. = () {
.(, event.);
};
worker.();
