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

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

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

一、什么是 Web Worker？

1、为什么需要 web worker

JavaScript 是'单线程'的，就像一个工人（主线程）同时只能做一件事：你让他'画页面'，他就画；你让他'算数据'，他就算；你同时让他画又让他算，他会傻住（页面卡死）。

Web Worker 的作用就相当于给 JavaScript 请了多个打工人（Worker）来做那些不需要碰 UI 的任务。

2、什么是 web worker

Web Worker 就是浏览器为 JavaScript 提供的一种'开小号干活'的机制，帮主线程分担计算任务，避免卡顿。

简单来说：

Web Worker = 浏览器中的子线程。

它能让我们把耗时操作（比如复杂计算、数据处理）丢到后台执行，主线程只负责 UI 渲染和交互，两边互不打扰。

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

总结来说就是能并行执行代码，不会卡住界面，并且通信机制简单的机制，常用来解决重 CPU 运算（算力密集型）的前端任务。

二、基本使用方法

来看一个最简单的 Web Worker 例子。

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>

五、注意事项

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

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

六、结语

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

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