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（或其他实现前端并行计算能力的技术）。

二、基本使用方法

来看一个最简单的 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：前端后台线程与性能优化