前端Wiki/词条/Web Worker 多线程

Web Worker 多线程

定义把耗时计算任务放到独立后台线程执行，不阻塞主线程的 UI 渲染

JavaScript 主线程单线程，大循环会把页面卡死。new Worker(脚本路径) 能创建一个后台线程：主线程用 postMessage 发数据，worker 通过 onmessage 收数据，算完再 postMessage 回来。数据传递默认是结构化克隆，传输大 ArrayBuffer 可用 Transferable Objects 零拷贝移交所有权。

Worker 里拿不到 window、document、parent，DOM 操作全部禁止，只能做纯计算（图像处理、大数据解析、加密排序）。脚本必须同源、不能是 file:// 打开。SharedArrayBuffer 与 Atomics 可以做多线程共享内存，但需要安全的跨域隔离头部配合。

主线程与 worker 之间用 postMessage / onmessage 通信
worker 里没有 window 和 document，不能操作 DOM
大数组可用 Transferable Objects 零拷贝移交，避免序列化开销

JavaScript

// 主线程：main.js
var worker = new Worker('calc.js');
worker.postMessage({ cmd: 'fib', n: 40 });
worker.onmessage = function (e) {
  console.log('后台线程算完:', e.data);
};

// 后台线程：calc.js 内容如下，独立文件运行
self.onmessage = function (e) {
  var n = e.data.n;
  var a = 0, b = 1;
  for (var i = 0; i < n; i++) { var t = a + b; a = b; b = t; }
  self.postMessage(a);
};

⚠ 常见误区

在 worker 里 document.querySelector 直接报错——worker 无 DOM
file:// 协议下创建 Worker 失败，必须同源 HTTP 环境
以为多线程共享内存——默认每次通信都是完整克隆

🔗 相关词条浏览器简单动画