Web Worker：前端多线程开发的隐形引擎
为什么需要 Web Worker
JavaScript 是单线程的，就像一个工人同时只能做一件事。你让他画页面，他就画；你让他算数据，他就算。如果同时让他画又让他算，界面就会卡死。
Web Worker 的作用相当于给 JavaScript 请了多个打工人来做那些不需要碰 UI 的任务。简单来说，它就是浏览器中的子线程，能让我们把耗时操作（比如复杂计算、数据处理）丢到后台执行，主线程只负责 UI 渲染和交互，两边互不打扰。
- Worker 无法直接操作 DOM。
- Worker 和主线程靠 postMessage 通信。
- Worker 是完全独立的执行环境，有自己的全局作用域。
总结来说就是能并行执行代码，不会卡住界面，并且通信机制简单。常用来解决重 CPU 运算的前端任务，比如处理海量数据运算时，网页需要设置计算机的核心数来获取最快的计算速度，就绕不开使用 Web Worker。
基本使用方法
来看一个最简单的 Web Worker 例子。
创建 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;
}
主线程引入并使用
在主线程中引入并调用：
const worker = new Worker('worker.js');
worker.postMessage(10); // 给子线程发消息
worker.onmessage = function(e) {
console.log('主线程收到子线程返回：', e.data);
};
主线程继续流畅渲染，不会因为计算被卡住。需注意，worker 文件必须是单独的 js 文件，且子线程无法操作 DOM，只能做纯计算或数据处理。
实战案例：在前端处理大批量数据
假设你的页面要处理 10 万条数据排序，如果直接在主线程排序，会严重卡顿。我们可以用 Worker 来优化。
Worker 文件
// sortWorker.js
self.onmessage = function(e) {
const sorted = e.data.sort((a, b) => a - b);
self.postMessage(sorted);
};
主线程调用
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），如下案例，使用体验和普通函数几乎一样，而且完全不卡页面。
新建 Worker 文件
// worker.js
self.onmessage = function(e) {
const result = e.data * 2;
self.postMessage(result);
};
在 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 };
}
页面组件中使用
<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>
注意事项
如果数据特别大，可以用 Transferable Objects 或 SharedArrayBuffer 优化传输性能。
| 注意点 | 说明 |
|---|---|
| DOM 操作 | Worker 无法操作 DOM。只能处理数据，UI 更新要回到主线程。 |
| 数据传输 | postMessage 实际上是数据拷贝，所以大对象传输有性能损耗。 |
| 销毁 | 使用完记得调用 worker.terminate()，否则会内存泄漏。 |
| 同源限制 | Worker 脚本受同源策略保护。 |
结语
Web Worker 是前端多线程开发的基石，提升了复杂应用的性能上限。它的使用非常简单，通过 postMessage 和 onmessage 双向通信即可。在实际业务中，如数据处理、音视频转码、大型图表绘制等场景，Worker 能显著优化用户体验。如果你的项目中存在明显的主线程卡顿，不妨试试引入 Web Worker，给用户带来丝滑流畅的体验感。
