Web Worker：前端多线程并行计算实战

实战案例：处理大批量数据

假设要排序 10 万条数据，主线程直接排会卡住。用 Worker 就稳多了。

Worker 端 (sortWorker.js)：

// 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.js：

// 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 是前端多线程开发的基石。在处理数据处理、音视频转码等场景时，它能显著提升用户体验。如果你的应用出现明显的主线程卡顿，不妨试试引入它，给用户带来丝滑流畅的体验。