Web Worker 有哪些类型，它们之间有什么区别？ - 面试题

Web Worker 有多种类型，每种类型适用于不同的使用场景。

1. Dedicated Worker（专用 Worker）

特点

专属于创建它的页面或脚本
一对一关系：一个 Dedicated Worker 只能被一个脚本使用
最常用的 Worker 类型

创建方式

javascript
// 从外部文件创建
const worker = new Worker('worker.js');

// 从 Blob URL 创建（内联 Worker）
const workerCode = `
  self.onmessage = function(e) {
    self.postMessage(e.data * 2);
  };
`;
const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));

使用场景

单页面的后台计算任务
图像处理
数据加密/解密
复杂的数学计算

2. Shared Worker（共享 Worker）

特点

可以被多个页面或脚本共享
多对多关系：多个脚本可以连接到同一个 Shared Worker
适用于跨标签页的通信和状态共享

创建方式

javascript
// 创建 Shared Worker
const sharedWorker = new SharedWorker('shared-worker.js');

// 连接到 Worker
sharedWorker.port.start();

// 发送消息
sharedWorker.port.postMessage('Hello');

// 接收消息
sharedWorker.port.onmessage = function(event) {
  console.log('Received:', event.data);
};

Shared Worker 内部实现

javascript
// shared-worker.js
const connections = [];

self.onconnect = function(event) {
  const port = event.ports[0];
  connections.push(port);

  port.onmessage = function(e) {
    // 广播消息给所有连接
    connections.forEach(conn => {
      conn.postMessage(e.data);
    });
  };

  port.start();
};

使用场景

多标签页状态同步
跨窗口通信
共享数据缓存
协同编辑应用

3. Service Worker（服务 Worker）

特点

作为网络代理，拦截和处理网络请求
独立于页面生命周期运行
用于实现离线功能和推送通知
必须在 HTTPS 环境下运行（localhost 除外）

注册方式

javascript
// 注册 Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registered:', registration);
    })
    .catch(function(error) {
      console.log('Registration failed:', error);
    });
}

Service Worker 实现

javascript
// service-worker.js
const CACHE_NAME = 'my-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];

// 安装事件
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        return cache.addAll(urlsToCache);
      })
  );
});

// 拦截请求
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

使用场景

PWA（渐进式 Web 应用）
离线缓存
后台同步
推送通知
网络请求优化

4. Worker 类型的对比

特性	Dedicated Worker	Shared Worker	Service Worker
作用域	单页面	多页面共享	全局代理
生命周期	随页面销毁	所有连接断开后销毁	独立运行
DOM 访问	❌	❌	❌
网络请求	❌	❌	✅
HTTPS 要求	❌	❌	✅
通信方式	postMessage	port.postMessage	postMessage + fetch

5. 其他 Worker 类型

AudioWorklet

用于音频处理
在音频渲染线程中运行
提供更精确的音频处理能力

javascript
const audioContext = new AudioContext();
audioContext.audioWorklet.addModule('audio-processor.js')
  .then(() => {
    const workletNode = new AudioWorkletNode(audioContext, 'audio-processor');
  });

OffscreenCanvas

在 Worker 中进行 Canvas 渲染
提升复杂图形渲染性能

javascript
const worker = new Worker('canvas-worker.js');
const offscreen = canvas.transferControlToOffscreen();
worker.postMessage({ canvas: offscreen }, [offscreen]);

选择建议

Dedicated Worker：大多数后台计算任务
Shared Worker：需要跨标签页共享状态
Service Worker：需要离线功能或网络请求控制
AudioWorklet：音频处理相关
OffscreenCanvas：复杂 Canvas 渲染