Web Worker 有哪些限制，如何解决这些限制？ - 面试题

Web Worker 有一些重要的限制，了解这些限制对于正确使用 Worker 至关重要。

主要限制

1. 无法访问 DOM

Web Worker 无法直接访问以下对象：

window
document
DOM 元素（如 document.getElementById）
parent（父窗口）

javascript
// ❌ 在 Worker 中无法执行
document.getElementById('myElement'); // 报错
window.innerWidth; // 报错

// ✅ 正确做法：通过消息传递
// 主线程
worker.postMessage({ action: 'getElement', id: 'myElement' });

// Worker
self.onmessage = function(e) {
  // 处理数据，返回结果
  self.postMessage({ result: processedData });
};

2. 无法使用某些 API

Worker 中不可用的 API：

localStorage、sessionStorage
IndexedDB（但可以通过 IndexedDB 的异步 API 使用）
document.cookie
alert()、confirm()、prompt()
history API
navigator 的部分属性

javascript
// ❌ Worker 中不可用
localStorage.setItem('key', 'value'); // 报错
alert('Hello'); // 报错

// ✅ 可用
fetch('/api/data'); // ✅
WebSocket; // ✅
XMLHttpRequest; // ✅
setTimeout/setInterval; // ✅

3. 同源策略限制

Worker 脚本必须与主页面同源，否则会抛出安全错误。

javascript
// ❌ 跨域加载 Worker
const worker = new Worker('https://other-domain.com/worker.js'); // 报错

// ✅ 同源加载
const worker = new Worker('/workers/worker.js'); // 正常

// ✅ 使用 Blob URL 绕过（但内容仍需同源）
const workerCode = 'self.onmessage = ...';
const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));

4. 无法同步加载脚本

Worker 内部只能使用 importScripts() 异步加载脚本。

javascript
// worker.js
// ✅ 异步加载
importScripts('utils.js', 'math.js');

// ❌ 同步加载不可用
const utils = require('./utils.js'); // 报错

5. 无法使用某些全局对象

Worker 的全局对象是 self（或 DedicatedWorkerGlobalScope），而不是 window。

javascript
// Worker 中的全局对象
console.log(self); // DedicatedWorkerGlobalScope

// 可用的全局方法
self.postMessage();
self.onmessage;
self.importScripts();
self.close();

// ❌ 不可用
window.postMessage(); // 报错
window.setTimeout(); // 报错（但 setTimeout 本身可用）

可用的 API 和功能

✅ Worker 中可用的功能

javascript
// 网络请求
fetch('/api/data');
const xhr = new XMLHttpRequest();

// 定时器
setTimeout(() => {}, 1000);
setInterval(() => {}, 1000);

// 数据存储
IndexedDB.open('myDB');

// WebSocket
const ws = new WebSocket('ws://example.com');

// Canvas（OffscreenCanvas）
const canvas = new OffscreenCanvas(300, 150);

// 加载其他脚本
importScripts('helper.js');

// 创建其他 Worker
const subWorker = new Worker('sub-worker.js');

// 性能相关
performance.now();
performance.mark('start');

限制的解决方案

1. DOM 操作的替代方案

javascript
// 主线程负责 DOM 操作
const worker = new Worker('worker.js');

worker.onmessage = function(e) {
  if (e.data.type === 'updateUI') {
    document.getElementById('result').textContent = e.data.value;
  }
};

// Worker 负责计算
// worker.js
self.onmessage = function(e) {
  const result = heavyComputation(e.data);
  self.postMessage({ type: 'updateUI', value: result });
};

2. 数据存储的替代方案

javascript
// 使用 IndexedDB（异步）
// worker.js
const request = indexedDB.open('myDB', 1);
request.onsuccess = function() {
  const db = request.result;
  // 使用 db 进行存储操作
};

// 或者通过主线程传递数据
// 主线程
const data = localStorage.getItem('key');
worker.postMessage({ data });

// Worker
self.onmessage = function(e) {
  const data = e.data.data;
  // 处理数据
};

3. 跨域限制的解决方案

javascript
// 使用 CORS 头部
// 服务器端设置
Access-Control-Allow-Origin: *

// 或者使用 Blob URL
const workerCode = fetch('https://other-domain.com/worker.js')
  .then(response => response.text())
  .then(code => {
    const blob = new Blob([code], { type: 'application/javascript' });
    const worker = new Worker(URL.createObjectURL(blob));
    return worker;
  });

性能考虑

创建 Worker 的开销

javascript
// ❌ 频繁创建和销毁 Worker（性能差）
for (let i = 0; i < 1000; i++) {
  const worker = new Worker('worker.js');
  worker.postMessage(i);
  worker.terminate();
}

// ✅ 复用 Worker（性能好）
const worker = new Worker('worker.js');
for (let i = 0; i < 1000; i++) {
  worker.postMessage(i);
}

消息传递的性能

javascript
// ❌ 频繁传递大量数据（性能差）
for (let i = 0; i < 10000; i++) {
  worker.postMessage({ data: largeArray[i] });
}

// ✅ 批量传递（性能好）
worker.postMessage({ data: largeArray });

// ✅ 使用 Transferable Objects
const buffer = new ArrayBuffer(1024 * 1024);
worker.postMessage({ buffer }, [buffer]);

最佳实践

Worker 只负责计算：将所有 DOM 操作放在主线程
最小化消息传递：减少主线程和 Worker 之间的通信
使用 Transferable Objects：对于大数据，使用转移而非拷贝
复用 Worker：避免频繁创建和销毁
错误处理：在 Worker 内部和主线程都添加错误处理
清理资源：使用完毕后调用 worker.terminate()