引言

在 Web 开发中，JavaScript 是单线程运行的，这意味着它在执行任务时会阻塞 UI 渲染，影响用户体验。为了解决这个问题，HTML5 引入了 Web Workers，允许 JavaScript 在后台线程中运行，从而提升页面的性能和响应速度。

什么是 Web Workers？

Web Workers 是 HTML5 提供的一种 Web API，它允许开发者创建独立的后台线程来执行 JavaScript 代码。这些线程独立于主线程运行，不会阻塞 UI 渲染，适用于处理复杂计算、数据处理等耗时任务。

Web Workers 的特点：

运行在单独的线程，不会阻塞主线程
不能直接操作 DOM（即 document、window 等对象不可用）
通过 postMessage() 与主线程通信
只能通过 self 访问部分全局对象，如 setTimeout、fetch、IndexedDB 等
受同源策略限制，不能跨域加载脚本

Web Workers 的使用方式

创建一个 Web Worker

Web Worker 需要在一个独立的 JavaScript 文件中编写，然后在主线程中创建并调用它。

步骤 1：创建 Worker 文件
新建一个 worker.js 文件，并编写如下代码：

self.onmessage = function(event) {
    let result = event.data * 2;
    self.postMessage(result); // 发送回主线程
};

步骤 2：在主线程中调用 Worker

// 创建 Worker
let worker = new Worker('worker.js');

// 监听 Worker 返回的数据
worker.onmessage = function(event) {
    console.log("Worker 计算结果:", event.data);
};

// 发送数据到 Worker
worker.postMessage(10);

Web Workers 的高级应用

使用 Blob 方式创建 Worker

在某些情况下，我们可能不希望单独创建 worker.js 文件，而是直接在主线程中创建 Worker。可以使用 Blob 方式实现：

const workerScript = `
    self.onmessage = function(event) {
        let result = event.data * 2;
        self.postMessage(result);
    };
`;

const blob = new Blob([workerScript], { type: "application/javascript" });
const worker = new Worker(URL.createObjectURL(blob));

worker.onmessage = function(event) {
    console.log("Blob Worker 计算结果:", event.data);
};

worker.postMessage(10);

终止 Worker

当 Worker 任务完成后，可以调用 worker.terminate() 立即终止它，以释放资源：

worker.terminate();

Web Workers 的应用场景

Web Workers 适用于处理 CPU 密集型任务，如：

大规模数据计算（如复杂数学计算、科学计算）
图片和视频处理（如图像滤镜、视频编码）
实时数据处理（如 WebSockets 处理高并发数据流）
文件操作（如解析大型 JSON、CSV 文件）

示例：计算从1到给定数值的总和

function calc(num) {
  let result = 0
  let startTime = performance.now()
  // 计算求和（模拟复杂计算）
  for (let i = 0; i <= num; i++) {
    result += i
  }
  // 由于是同步计算，在没计算完成之前下面的代码都无法执行
  const time = performance.now() - startTime
  console.log('总计算花费时间:', time)
  self.postMessage(result)
}

self.onmessage = function (e) {
  calc(e.data)
}

const worker = new Worker('./worker.js')

function calc() {
    const num = parseInt(document.getElementById('num').value)
    worker.postMessage(num)
}

worker.onmessage = function (e) {
    document.getElementById('result').innerHTML = e.data
}

Web Workers 的局限性

尽管 Web Workers 提供了异步执行能力，但它们仍然存在一些限制：

无法直接操作 DOM（不能修改 HTML 元素）
主线程和 Worker 之间的通信有开销（数据通过 postMessage 传递）
受同源策略限制（只能加载同源的脚本）
线程创建和管理成本高（创建大量 Worker 可能会影响性能）

结论

Web Workers 是提升 Web 应用性能的强大工具，特别适用于CPU计算密集型任务。但是由于它无法操作 DOM，并且数据传输存在一定开销，因此需要合理使用，以确保整体性能的优化。
如果你正在开发需要执行复杂计算或处理大量数据的 Web 应用，Web Workers 是一个值得考虑的技术。