Web Worker 有哪些限制？怎么解决？

为什么 Worker 有这么多限制

Worker 的限制不是偷懒，是设计上的安全选择。浏览器最核心的约束是：DOM 操作不是线程安全的。两个线程同时改同一个 DOM 节点，后果不可预测。所以 Worker 干脆被隔离了——不能碰 DOM、不能碰大部分浏览器 API，只能通过 postMessage 通信。

理解了这个前提，限制就不是"不能做什么"，而是"怎么绕过去"。

限制一：不能访问 DOM

这是最大的限制。Worker 里没有 document、没有 window、没有任何 DOM API。

javascript
// ❌ Worker 里直接报错
document.getElementById('app');
window.innerWidth;

解决方式：计算在 Worker 里做，DOM 操作回主线程执行。

javascript
// Worker：只算数据
self.onmessage = (e) => {
  const positions = calculateLayout(e.data.items);
  self.postMessage({ positions });
};

// 主线程：拿到结果后操作 DOM
worker.onmessage = (e) => {
  const { positions } = e.data;
  positions.forEach(({ id, x, y }) => {
    document.getElementById(id).style.transform = `translate(${x}px, ${y}px)`;
  });
};

这个模式有个名字叫"数据驱动渲染"——Worker 产出数据，主线程负责映射到 DOM。虚拟 DOM 框架（React/Vue）天然适合这种模式：Worker 里做 diff 计算，把最小更新集传给主线程 apply。

如果需要频繁操作 Canvas，用 OffscreenCanvas 把 Canvas 上下文转移给 Worker：

javascript
const canvas = document.getElementById('canvas');
const offscreen = canvas.transferControlToOffscreen();
worker.postMessage({ canvas: offscreen }, [offscreen]);

// Worker 里直接绘制
self.onmessage = (e) => {
  const ctx = e.data.canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(0, 0, 100, 100);
};

限制二：不能用 localStorage

localStorage 是同步 API，多线程同时读写会产生竞态条件，所以 Worker 被禁止访问。

解决方式：用 IndexedDB 替代。IndexedDB 是异步的，Worker 可以直接使用。

javascript
// Worker 里直接操作 IndexedDB
const request = indexedDB.open('myDB', 1);
request.onupgradeneeded = (e) => {
  e.target.result.createObjectStore('data', { keyPath: 'id' });
};
request.onsuccess = (e) => {
  const db = e.target.result;
  const tx = db.transaction('data', 'readwrite');
  tx.objectStore('data').put({ id: 1, value: 'from worker' });
};

如果你非要从 Worker 里读写 localStorage 的数据，让主线程做中转：

javascript
// Worker 请求读取
self.postMessage({ type: 'getLocalStorage', key: 'token' });

// 主线程中转
worker.onmessage = (e) => {
  if (e.data.type === 'getLocalStorage') {
    const value = localStorage.getItem(e.data.key);
    worker.postMessage({ type: 'localStorageResult', key: e.data.key, value });
  }
};

但这样每读一次都要跨线程通信，性能很差。能用 IndexedDB 就用 IndexedDB。

限制三：不能发起 XHR 请求

XMLHttpRequest 的同步模式（open(method, url, false)）会阻塞线程，在 Worker 里被禁止。但异步 XHR 其实也不推荐——用 fetch 替代。

解决方式：Worker 里用 fetch，它是异步的且完全支持。

javascript
// Worker 里直接发请求
self.onmessage = async (e) => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  self.postMessage({ data });
};

WebSocket 和 EventSource 也能在 Worker 里正常使用，不受限制。

限制四：不能加载跨域脚本

Worker 脚本必须和主页面同源。跨域 URL 直接创建会报 SecurityError。

解决方式 1：Blob URL 内联。

javascript
// 先 fetch 跨域脚本内容，再创建 Blob Worker
const response = await fetch('https://cdn.example.com/worker.js');
const code = await response.text();
const blob = new Blob([code], { type: 'text/javascript' });
const worker = new Worker(URL.createObjectURL(blob));

注意：这绕过了同源限制但引入了新风险——你加载的跨域代码可能被篡改。确保 CDN 可信，最好配上 SRI（Subresource Integrity）。

解决方式 2：importScripts 可以加载跨域脚本（Worker 内部）。

javascript
// worker.js
importScripts('https://cdn.example.com/lib.js');

importScripts 不受同源限制，但受 CSP 的 script-src 约束。

限制五：没有 window 对象

Worker 的全局对象是 self（DedicatedWorkerGlobalScope），不是 window。很多挂在 window 上的东西在 Worker 里不存在。

主线程有	Worker 里	替代方案
window	self	直接用 self
window.location	self.location（只读）	能读不能改
window.navigator	self.navigator	大部分属性可用
window.alert()	不存在	用 postMessage 通知主线程
window.setTimeout	self.setTimeout	正常可用
window.fetch	self.fetch	正常可用
window.indexedDB	self.indexedDB	正常可用

限制六：通信有序列化开销

postMessage 默认用结构化克隆，数据要拷贝一份。小数据无所谓，大数据（几 MB 以上）拷贝开销可能比计算本身还大。

解决方式：

方案	适用场景	原理
Transferable	大 ArrayBuffer/Blob 单向传输	所有权转移，零拷贝
SharedArrayBuffer	高频双向读写同一块数据	共享内存，Atomics 同步
批量发送	大量小消息	攒批发，减少序列化次数

详见 Web Worker 通信全解析。

限制七：脚本路径是相对 HTML 的

javascript
// 如果 HTML 在 /pages/index.html
// Worker 脚本在 /workers/task.js
new Worker('task.js');         // ❌ 会找 /pages/task.js
new Worker('/workers/task.js'); // ✅ 绝对路径

在打包工具里更容易搞错。Vite/Webpack 5 的正确写法：

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

import.meta.url 是当前模块的 URL，new URL 相对于它解析，打包工具会正确处理路径。

总结：一张表搞定

限制	解决方案
不能访问 DOM	Worker 算数据，主线程操作 DOM；用 OffscreenCanvas
不能用 localStorage	用 IndexedDB 替代
不能用同步 XHR	用 fetch 替代
不能加载跨域脚本	Blob URL 或 importScripts
没有 window 对象	用 self 替代
通信有序列化开销	Transferable / SharedArrayBuffer / 批量发送
脚本路径问题	new URL('./worker.js', import.meta.url)

这些限制的本质就是一条：Worker 是数据处理器，不是 UI 控制器。把计算放进去，把渲染留在外面，架构对了限制就不是问题。