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

主线程继续流畅渲染，不会因为计算被卡住。需注意，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 优化传输性能。

结语

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