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

假设要排序 10 万条数据，直接在主线程会卡顿。用 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');
const bigArray = Array.from({ length: 100000 }, () => Math.random() * 100000);
worker.postMessage(bigArray);
worker.onmessage = (e) => {
  console.log('排序完成：', e.data);
};

Vue3 中的优雅实践

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

新建 Worker 文件：

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

封装 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();
  });

  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);
}
</script>

注意事项

如果数据特别大，可以用 Transferable Objects 优化传输性能。

Web Worker 是前端多线程开发的基石。如果你的项目存在明显的主线程卡顿，不妨试试引入它，能显著优化用户体验。