Web Worker：前端多线程开发的隐形引擎

Web Worker：前端多线程开发的隐形引擎 | 极客日志

Web Worker：前端多线程开发的隐形引擎

一、什么是 Web Worker？

1. 为什么需要 Web Worker

JavaScript 是单线程的，主线程同时只能做一件事。如果执行耗时任务（如复杂计算），页面会卡死。Web Worker 的作用是为 JavaScript 提供子线程，让不需要操作 UI 的任务在后台运行。

2. 什么是 Web Worker

Web Worker 是浏览器提供的多进程机制，帮主线程分担计算任务，避免卡顿。

Worker 无法直接操作 DOM。
通信通过 postMessage 进行。
环境是完全独立的执行环境，有自己的全局作用域。

总结来说，它能并行执行代码，不会卡住界面，常用于解决重 CPU 运算（算力密集型）的前端任务。

二、基本使用方法

1. 创建一个 Worker 文件（worker.js）

// worker.js
self.onmessage = function(e) {
  console.log('子线程收到：', e.data);
  const result = heavyComputation(e.data);
  self.postMessage(result); // 把结果发回主线程
};

function heavyComputation(input) {
  let sum = 0;
  for (let i = 0; i < 1e9; i++) {
    sum += input;
  }
  return sum;
}

2. 主线程引入并使用

const worker = new Worker('worker.js');
worker.postMessage(10); // 给子线程发消息
worker.onmessage = function(e) {
  console.log('主线程收到子线程返回：', e.data);
};

主线程继续流畅渲染，不会因为计算被卡住。注意：worker 文件必须是单独的 js 文件，且子线程无法操作 DOM，只能做纯计算或数据处理。

三、实战案例：在前端处理大批量数据

假设你的页面要处理 10 万条数据排序，如果直接在主线程排序，会严重卡顿。我们可以用 Worker 来优化。

1. Worker 文件（sortWorker.js）

// sortWorker.js
self.onmessage = function(e) {
  const sorted = e.data.sort((a, b) => a - b);
  self.postMessage(sorted);
};

2. 主线程调用

const worker = new Worker('sortWorker.js');
// 生成 10 万条数据
const bigArray = Array.from({ length: 100000 }, () => Math.random() * 100000);
worker.postMessage(bigArray);
worker.onmessage = (e) => {
  console.log('排序完成，结果是：', e.data);
};
// 同时，页面可以继续响应用户操作，不卡顿！

四、Vue3 中如何优雅使用 Web Worker

在 Vue3 项目中，可以将 Worker 封装成组合式函数（Composition API），使用体验和普通函数几乎一样。

1. 新建 Worker 文件（worker.js）

// worker.js
self.onmessage = function(e) {
  const result = e.data * 2;
  self.postMessage(result);
};

2. 在 Vue3 中封装成 Hook

// useWorker.js
import { ref, onUnmounted } from 'vue';

export function useWorker(workerPath) {
  const result = ref(null);
  const worker = new Worker(workerPath);
  
  const post = (data) => {
    worker.postMessage(data);
  };

  worker.onmessage = (e) => {
    result.value = e.data;
  };

  onUnmounted(() => {
    worker.terminate(); // 页面销毁时记得关闭 Worker
  });

  return { post, result };
}

3. 页面组件中使用

<template>
  <div>
    <button @click="doubleValue">计算 2 倍</button>
    <p>结果：{{ result }}</p>
  </div>
</template>

<script setup>
import { useWorker } from './useWorker';

const { post, result } = useWorker(new URL('./worker.js', import.meta.url).href);

function doubleValue() {
  post(5); // 给子线程发送 5，子线程返回 10
}
</script>

五、注意事项

注意点	说明
DOM 操作	Worker 无法操作 DOM。只能处理数据，UI 更新要回到主线程。
数据传输	postMessage 实际上是数据拷贝，所以大对象传输有性能损耗。
销毁	使用完记得调用 `worker.terminate()`，否则会内存泄漏。
同源限制	Worker 脚本受同源策略保护。

六、结语

Web Worker 是前端多线程开发的基石，提升了复杂应用的性能上限。它的使用非常简单，通过 postMessage 和 onmessage 双向通信即可。在实际业务中，如数据处理、音视频转码、大型图表绘制等场景，Worker 能显著优化用户体验。如果你的项目中存在明显的主线程卡顿，不妨试试引入 Web Worker，给用户带来丝滑流畅的体验。

Web Worker：前端多线程开发的隐形引擎