浏览器多线程架构与Web Worker运行机制

JavaScript单线程执行模型下，CPU密集型计算会阻塞主线程导致页面卡顿。Web Worker为浏览器提供真正的多线程能力——Worker线程与主线程并行执行，互不阻塞。主线程负责DOM操作和用户交互，Worker线程处理数据计算、文件解析、图像处理等重负载任务。两者通过postMessage通信，数据默认被结构化克隆（Structured Clone），存在序列化开销。

Web Worker分三种类型：Dedicated Worker（专用Worker，与创建它的页面一对一绑定）、Shared Worker（共享Worker，可被多个页面或iframe共享）、Service Worker（服务Worker，充当网络代理实现离线缓存）。日常性能优化最常用的是Dedicated Worker。

Dedicated Worker线程通信与Transferable对象

主线程创建Worker并通信的基础模式：

// main.js - 主线程
const worker = new Worker('worker.js');
const largeArray = new Float64Array(1000000);
worker.postMessage({ type: 'process', data: largeArray }, [largeArray.buffer]);

worker.onmessage = (e) => {
  const { type, result } = e.data;
  console.log('计算结果:', result);
};

// worker.js - Worker线程
self.onmessage = (e) => {
  const { type, data } = e.data;
  if (type === 'process') {
    const result = heavyComputation(data);
    self.postMessage({ type: 'done', result });
  }
};

function heavyComputation(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += Math.sin(arr[i]) * Math.cos(arr[i]);
  }
  return sum;
}

postMessage的第二个参数是Transferable对象列表。ArrayBuffer、ImageBitmap、OffscreenCanvas等对象支持所有权转移（Transfer），转移后原线程的引用变为不可用，但数据零拷贝传递，对大数组或大文件场景性能提升显著。100万元素Float64Array的结构化克隆耗时约15ms，Transfer仅需0.1ms。

SharedArrayBuffer与Atomics原子操作

SharedArrayBuffer（SAB）实现主线程与Worker之间的真正共享内存——同一块内存两者都可读写，无需数据拷贝。SAB配合Atomics原子操作实现无锁同步，适合高频数据交换场景如实时数据流处理、音视频帧共享。

// main.js - 创建共享内存
const sab = new SharedArrayBuffer(4 * 1024 * 1024); // 4MB共享缓冲区
const sharedArray = new Int32Array(sab);

const worker1 = new Worker('worker.js');
const worker2 = new Worker('worker.js');
worker1.postMessage({ type: 'init', buffer: sab });
worker2.postMessage({ type: 'init', buffer: sab });

// 主线程读取共享数据
setInterval(() => {
  const value = Atomics.load(sharedArray, 0);
  console.log('共享值:', value);
}, 1000);

// worker.js - Worker写入共享内存
let sharedArray;

self.onmessage = (e) => {
  if (e.data.type === 'init') {
    sharedArray = new Int32Array(e.data.buffer);
    startProcessing();
  }
};

function startProcessing() {
  let counter = 0;
  setInterval(() => {
    Atomics.store(sharedArray, 0, counter++);
    Atomics.add(sharedArray, 1, 1);
  }, 100);
}

Atomics提供load、store、add、sub、and、or、xor、compareExchange、exchange、wait、notify等原子操作。wait/notify实现类似futex的线程等待机制，Worker可以挂起等待直到主线程notify唤醒。这种模式比轮询高效，CPU零开销等待。

安全限制与COOP/COEP头配置

SharedArrayBuffer因Spectre漏洞的安全风险，浏览器要求页面必须处于跨域隔离环境才允许使用。服务端需配置以下HTTP响应头：

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

COOP: same-origin阻止跨域页面获取当前页面的引用；COEP: require-corp要求所有跨域资源（图片、脚本、样式等）必须带CORP或CORS头。Nginx配置示例：

server {
    listen 443 ssl;
    server_name example.com;
    add_header Cross-Origin-Opener-Policy "same-origin" always;
    add_header Cross-Origin-Embedder-Policy "require-corp" always;
    add_header Cross-Origin-Resource-Policy "cross-origin" always;
}

启用COEP后，页面引用的第三方CDN资源如果没有正确的CORS头会被浏览器拦截。可通过crossorigin属性标记跨域资源，或使用代理转发为同域资源解决。

实战场景：大数据量客户端实时过滤与排序

10万行数据表的实时搜索过滤是典型的高负载场景。主线程监听input事件后将过滤条件发送给Worker，Worker在共享内存中标记匹配行索引，主线程直接读取标记结果渲染DOM。相比主线程过滤，Worker方案在数据量超过5万行时帧率优势明显——主线程过滤10万行耗时约200ms导致丢帧，Worker方案主线程仅读取结果约5ms完成渲染。

Web Worker多线程不是银弹，线程创建开销约30-50ms，通信序列化开销随数据量增长。判断是否使用Worker的阈值：计算耗时超过16ms（一帧）且无法拆分到requestIdleCallback中时，Worker是合适选择。

Web Worker多线程模型与浏览器并行计算

JavaScript单线程执行模型在计算密集型任务面前存在天然瓶颈。Web Worker为浏览器提供了真正的操作系统级线程，Worker线程运行在独立的全局上下文中，无法直接访问DOM，但可以执行任意JavaScript计算。主线程与Worker之间通过postMessage通信，数据默认采用结构化克隆算法复制传输。

Web Worker分为Dedicated Worker和Shared Worker两类。Dedicated Worker一对一绑定创建者，Shared Worker可被多个页面共享。计算密集型场景推荐Dedicated Worker，跨页面通信推荐Shared Worker。

Dedicated Worker基本通信与数据传输

主线程创建Worker并建立双向通信：

// main.js - 主线程
const worker = new Worker('compute-worker.js');

// 发送任务到Worker
worker.postMessage({
  type: 'START_COMPUTE',
  data: largeArray,
  config: { iterations: 1000, threshold: 0.001 }
});

// 接收Worker返回结果
worker.onmessage = (event) => {
  const { type, result, progress } = event.data;
  if (type === 'PROGRESS') {
    updateProgressBar(progress);
  } else if (type === 'COMPLETE') {
    renderResult(result);
  }
};

// compute-worker.js - Worker线程
self.onmessage = (event) => {
  const { type, data, config } = event.data;

  if (type === 'START_COMPUTE') {
    const result = heavyComputation(data, config);
    self.postMessage({ type: 'COMPLETE', result });
  }
};

function heavyComputation(data, config) {
  let result = [];
  for (let i = 0; i < config.iterations; i++) {
    const partial = processChunk(data, i, config.threshold);
    result.push(partial);

    if (i % (config.iterations / 10) === 0) {
      self.postMessage({ type: 'PROGRESS', progress: i / config.iterations });
    }
  }
  return result;
}

postMessage默认使用结构化克隆复制数据，对于大型ArrayBuffer会产生显著的拷贝开销。10MB数据传输可能消耗数十毫秒，在高频通信场景下会成为瓶颈。

Transferable Objects零拷贝传输机制

Transferable Objects机制允许将ArrayBuffer的所有权从主线程转移给Worker，实现零拷贝传输。转移后原线程对该缓冲区的引用将失效：

// 主线程 - 零拷贝传输
const buffer = new Float64Array(1000000);  // 约8MB数据
// 填充数据...

// 通过transferList转移buffer所有权
worker.postMessage({ type: 'PROCESS', buffer: buffer.buffer }, [buffer.buffer]);

// 转移后，buffer在主线程变为0长度
console.log(buffer.length);  // 0 - 所有权已转移

// Worker端接收
self.onmessage = (event) => {
  const { buffer } = event.data;
  const floatArray = new Float64Array(buffer);
  // 直接操作，无需拷贝
  const result = computeInPlace(floatArray);

  // 将结果转移回主线程
  self.postMessage({ type: 'RESULT', buffer: result.buffer }, [result.buffer]);
};

Transferable Objects支持的类型包括：ArrayBuffer、MessagePort、ImageBitmap、OffscreenCanvas。传输后原线程引用被剥离，避免双写导致的内存占用倍增和竞态条件。

SharedArrayBuffer多线程共享内存编程

SharedArrayBuffer允许多个Worker线程共享同一块内存区域，无需数据拷贝即可实现线程间数据交换。SharedArrayBuffer需要严格的安全上下文（Cross-Origin-Isolation）：

// 服务端必须配置COOP/COEP响应头
// Cross-Origin-Opener-Policy: same-origin
// Cross-Origin-Embedder-Policy: require-corp

// 主线程创建共享缓冲区
const sharedBuffer = new SharedArrayBuffer(4 * 1024 * 1024);  // 4MB共享内存
const sharedArray = new Float64Array(sharedBuffer);

// 初始化数据
for (let i = 0; i < sharedArray.length; i++) {
  sharedArray[i] = Math.random();
}

// 创建多个Worker共享同一内存
const workerCount = navigator.hardwareConcurrency || 4;
const workers = [];
const chunkSize = sharedArray.length / workerCount;

for (let i = 0; i < workerCount; i++) {
  const worker = new Worker('shared-worker.js');
  worker.postMessage({
    sharedBuffer,
    offset: i * chunkSize,
    length: chunkSize,
    workerId: i
  });
  workers.push(worker);
}

Worker端使用Atomics操作保证共享内存的原子访问：

// shared-worker.js
self.onmessage = (event) => {
  const { sharedBuffer, offset, length, workerId } = event.data;
  const sharedArray = new Float64Array(sharedBuffer);

  // 并行计算各自负责的分片
  for (let i = offset; i < offset + length; i++) {
    sharedArray[i] = Math.sqrt(sharedArray[i]) * 2.5;
  }

  // 使用Atomics同步完成信号
  const syncBuffer = new Int32Array(sharedBuffer);
  const finishedIndex = syncArray.length - 1;
  const prev = Atomics.add(syncArray, finishedIndex, 1);

  if (prev + 1 === workerCount) {
    self.postMessage({ type: 'ALL_COMPLETE' });
  }
};

Atomics原子操作与同步原语

SharedArrayBuffer的并发访问必须通过Atomics对象进行同步。Atomics提供了load、store、add、sub、and、or、xor、compareExchange、exchange等原子操作，以及wait/notify实现类似条件变量的同步机制：

// 使用Atomics实现简单的自旋锁
class SpinLock {
  constructor(sharedBuffer, byteOffset) {
    this.lock = new Int32Array(sharedBuffer, byteOffset, 1);
  }

  acquire() {
    while (Atomics.compareExchange(this.lock, 0, 0, 1) !== 0) {
      // 自旋等待，可加入短暂yield降低CPU占用
    }
  }

  release() {
    Atomics.store(this.lock, 0, 0);
  }
}

// 使用Atomics.wait/notify实现生产者-消费者
Atomics.store(dataArray, writeIndex, value);
Atomics.notify(dataArray, writeIndex);

Atomics.wait(dataArray, readIndex, expectedValue, timeout);

Web Worker与SharedArrayBuffer的组合在图像处理、大规模数值计算、音视频编解码等场景中可带来2-8倍的性能提升，具体取决于CPU核心数和计算密集程度。需要特别注意浏览器兼容性，SharedArrayBuffer目前仅在安全上下文下可用，部分企业网络代理可能会剥离COOP/COEP响应头导致功能降级。