什么是 Web Worker，它如何提升网页性能？

Web Worker 是 HTML5 提供的一种在后台线程中运行 JavaScript 的机制。它允许在不阻塞主线程的情况下执行耗时任务，从而提升用户体验。

核心概念

Web Worker 运行在独立的线程中，与主线程并行执行。这意味着：

• 独立执行环境：Worker 有自己的全局对象，不是 window，而是 DedicatedWorkerGlobalScope 或 SharedWorkerGlobalScope
• 无 DOM 访问权限：Worker 无法直接访问 DOM、document、window 等对象
• 消息通信：通过 postMessage() 和 onmessage 事件与主线程通信
• 同源策略：Worker 脚本必须与主页面同源

基本用法

javascript
// 主线程创建 Worker
const worker = new Worker('worker.js');

// 发送消息给 Worker
worker.postMessage({ data: 'Hello from main thread' });

// 接收 Worker 的消息
worker.onmessage = function(event) {
  console.log('Received from worker:', event.data);
};

// worker.js
self.onmessage = function(event) {
  const result = performHeavyComputation(event.data);
  self.postMessage(result);
};

应用场景

1. 大数据处理：处理大型数组、JSON 数据
2. 复杂计算：图像处理、加密解密、物理模拟
3. 后台任务：定期检查、数据同步
4. 实时数据处理：视频/音频处理、WebSocket 消息处理

限制

• 无法访问 DOM
• 无法使用某些 API（如 localStorage）
• 同源限制
• 创建 Worker 有一定的性能开销