什么是 Web Worker?
JavaScript 运行在单线程环境中,就像一个人同时只能做一件事。如果执行耗时任务(如复杂计算),界面就会卡死。Web Worker 的作用就是给 JavaScript 开了一个'小号',把重任务丢到后台线程去跑,主线程继续负责 UI 渲染和交互。
核心特性很简单:
- Worker 无法直接操作 DOM。
- 通过
postMessage和onmessage通信。 - 拥有独立的全局作用域。
简单来说,它能让我们把耗时操作(比如复杂计算、数据处理)丢到后台执行,主线程只负责 UI 渲染和交互,两边互不打扰。常用来解决重 CPU 运算的前端任务,比如海量数据排序或配置计算。
基本使用方法
先写一个 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;
}
主线程里实例化它:
const worker = new Worker('worker.js');
worker.postMessage(10);
worker.onmessage = function(e) {
console.log('主线程收到结果:', e.data);
};
注意,Worker 必须是独立的 .js 文件,且不能操作 DOM。主线程继续流畅渲染,不会因为计算被卡住。


