当前位置：首页 > news >正文

Web Worker 从原理到实战 —— 把耗时工作搬到后台线程，避免页面卡顿

news 2025/9/7 7:14:37

摘要：JavaScript 是单线程的，这句话的意思是指默认执行时是所有代码都在js主要线程运行，遇到复杂计算或频繁序列化会阻塞页面。Web Worker 提供后台线程能力，把耗时任务交给子线程处理，从而保持 UI 流畅。本文从原理讲起，逐步展示基础用法、进阶技巧和常见场景，最后结合 IM 消息缓存的实战，在我真实项目中手写pina插件存入indexdb也有使用过Web Worker 后续会分享，帮助你把 Worker 真正用到业务中。

1. 为什么需要 Web Worker

JavaScript 的执行基于事件循环，主线程既负责脚本也负责渲染。当主线程被大量计算或 IO 占用时，页面就会卡顿。
解决方案：把这些与 DOM 无关的耗时工作交给 Web Worker。

2. Web Worker 的核心原理

线程隔离：Worker 无法直接访问 DOM。
消息传递：主线程与 Worker 通过 postMessage / onmessage 通信。
结构化克隆：消息会被复制，开销较大。
Transferable：支持零拷贝传输大数据。
生命周期：new Worker() 创建，terminate() 或 self.close() 结束。

3. 最简用法

worker.js

self.onmessage = (e) => {const n = e.data;let sum = 0;for (let i = 0; i < n; i++) sum += i;postMessage(sum);
};

index.html

<script>const worker = new Worker('worker.js');worker.onmessage = (e) => {console.log('结果：', e.data);};worker.postMessage(100000000);
</script>

现代打包工具可用：

const worker = new Worker(new URL('./worker.js', import.meta.url), { type: 'module' });

4. 进阶技巧

Blob 动态创建

const code = `self.onmessage = e => {const arr = e.data;postMessage(arr.sort((a,b) => a - b));};
`;
const blob = new Blob([code], { type: 'text/javascript' });
const url = URL.createObjectURL(blob);
const worker = new Worker(url);

Transferable

const buffer = new ArrayBuffer(1024 * 1024 * 10);
worker.postMessage({ buffer }, [buffer]);

SharedArrayBuffer

适合极端性能需求，但需服务端安全头（COOP/COEP），一般项目少用。

5. Worker 池

减少频繁创建/销毁开销，适合高并发任务。

import { WorkerPool } from './workerPool';const pool = new WorkerPool(new URL('./taskWorker.js', import.meta.url), 3);
const results = await Promise.all(inputs.map(i => pool.exec(i)));
pool.terminate();

（WorkerPool 的实现见文中完整代码，可直接复制使用）

6. 适用与避免场景

适用：

大数组/矩阵计算
图像处理、加解密、音视频转码
大量序列化（JSON/Protobuf）
文件解析、批量 IndexedDB 写入

避免：

需要直接操作 DOM
短小任务（创建 Worker 成本更高）

7. 实战：IM 消息缓存（IndexedDB）

即时通讯应用中，断网恢复或拉历史消息时需要批量写入本地 IndexedDB。直接在主线程操作会卡顿，将逻辑放到 Worker 更流畅。

dbWorker.js

self.onmessage = async (ev) => {const { cmd, payload } = ev.data;const db = await openDb();if (cmd === 'bulkSave') {await putMany(db, payload);postMessage({ cmd, ok: true });} else if (cmd === 'getAll') {const list = await getAll(db);postMessage({ cmd, ok: true, data: list });}
};

主线程调用

const dbWorker = new Worker('dbWorker.js');
dbWorker.onmessage = (e) => {if (e.data.cmd === 'bulkSave') console.log('保存完成');if (e.data.cmd === 'getAll') renderMessages(e.data.data);
};dbWorker.postMessage({ cmd: 'bulkSave', payload: msgs });
dbWorker.postMessage({ cmd: 'getAll' });