Web Workers多线程

// 一个典型的主线程阻塞场景
document.querySelector('#btn').addEventListener('click', () => {
  // 同步执行约 5 秒的重计算
  let sum = 0;
  for (let i = 0; i < 5_000_000_000; i++) {
    sum += Math.sqrt(i);
  }
  console.log(sum);

  // 在这 5 秒内：
  // - 页面无法滚动
  // - 按钮无法再次点击
  // - CSS 动画完全卡死
  // - 输入框无法输入任何字符
});

// 更糟的是：浏览器会先执行同步代码，
// 页面连"加载中"都来不及渲染出来。

/* 主线程与 Worker 的关系（概念模型） */

// 主线程（Main Thread）
// - 负责渲染、事件、DOM 操作
// - 通过 postMessage 发送任务
// - 通过 onmessage 接收结果

// Worker 线程（Worker Thread）
// - 没有任何 DOM / window 对象
// - 拥有 self、navigator、fetch 等能力
// - 适合做纯计算、数据处理、网络请求编排

/* 关键特性 */
const features = [
  '真正的并行执行（不阻塞 UI）',
  '独立的全局作用域',
  '基于消息的通信',
  '受同源策略限制',
  '无法直接操作 DOM'
];

/* ---------- main.js（主线程） ---------- */
// 1. 创建 Worker，传入脚本路径
const worker = new Worker('./worker.js');

// 2. 发送任务给 Worker
worker.postMessage({
  type: 'sum',
  payload: [1, 2, 3, 4, 5]
});

// 3. 监听 Worker 返回的结果
worker.onmessage = (event) => {
  console.log('收到结果：', event.data);
};

// 4. 监听错误
worker.onerror = (event) => {
  console.error('Worker 出错：', event.message);
};

// 5. 任务完成后终止 Worker（释放资源）
// worker.terminate();

/* ---------- worker.js（Worker 线程） ---------- */
// Worker 中 self 指向 WorkerGlobalScope
self.onmessage = (event) => {
  const { type, payload } = event.data;

  if (type === 'sum') {
    const result = payload.reduce((a, b) => a + b, 0);

    // 把结果回传给主线程
    self.postMessage({ type: 'result', result });
  }
};

// 也可以使用 addEventListener 写法
// self.addEventListener('message', handler);

/* 支持传递的数据类型 */
worker.postMessage({
  // 基本类型
  num: 42,
  str: 'hello',
  bool: true,
  nil: null,

  // 复杂结构
  arr: [1, 2, { nested: true }],
  obj: { a: 1, b: { c: 2 } },
  date: new Date(),
  regex: /abc/gi,
  map: new Map([['k', 'v']]),
  set: new Set([1, 2]),
  buf: new ArrayBuffer(16)
});

/* 不支持传递的内容（会抛出 DataCloneError） */
// - 函数 / 闭包
// - DOM 节点
// - 原型链上的自定义属性
// - Symbol、WeakMap、WeakSet

/* ---------- 拷贝 vs 转移 ---------- */

// ❌ 拷贝：100MB 数据被完整复制一份
const buffer = new ArrayBuffer(100 * 1024 * 1024);
worker.postMessage(buffer);
console.log(buffer.byteLength); // 104857600（仍然可用）

// ✅ 转移：所有权移交，零拷贝
const buffer2 = new ArrayBuffer(100 * 1024 * 1024);
worker.postMessage(buffer2, [buffer2]);
console.log(buffer2.byteLength); // 0（已被转移）

/* 可转移的对象类型 */
// ArrayBuffer、MessagePort、
// ImageBitmap、OffscreenCanvas、ReadableStream

/* ---------- 共享内存：SharedArrayBuffer ---------- */
// 主线程：创建共享内存
const sab = new SharedArrayBuffer(1024);
const view = new Int32Array(sab);
worker.postMessage(sab); // 无需转移列表

// Worker：直接读写同一块内存
self.onmessage = (e) => {
  const arr = new Int32Array(e.data);
  arr[0] = 100; // 主线程立即可见
};

/* 使用 Atomics 保证并发安全 */
Atomics.add(view, 0, 1);
Atomics.load(view, 0);
Atomics.store(view, 0, 42);
Atomics.wait(view, 0, 0); // 阻塞等待
Atomics.notify(view, 0, 1); // 唤醒

/* ✅ Worker 中可用的能力 */
self // Worker 全局对象
fetch() // 网络请求
XMLHttpRequest // 传统 AJAX
WebSocket // 长连接
IndexedDB // 本地数据库
Cache // 缓存 API
setTimeout / setInterval
crypto.subtle // 加密
TextEncoder / TextDecoder
OffscreenCanvas // 离屏画布
importScripts() // 加载脚本

/* ❌ Worker 中不可用的能力 */
window // 不存在
document // 无法操作 DOM
alert() / confirm()
localStorage // 不可访问
parent / top
postMessage 之外的 UI 接口

/* worker-pool.js —— 轻量级 Worker 池实现 */
class WorkerPool {
  constructor(url, size = navigator.hardwareConcurrency || 4) {
    this.size = size;
    this.url = url;
    this.workers = [];
    this.idle = [];
    this.queue = [];
    this.seq = 0;
    this.callbacks = new Map();
    this._init();
  }

  _init() {
    for (let i = 0; i < this.size; i++) {
      const w = new Worker(this.url);
      w.onmessage = (e) => this._onMessage(w, e);
      this.workers.push(w);
      this.idle.push(w);
    }
  }

  exec(type, payload, transfer = []) {
    return new Promise((resolve, reject) => {
      const id = ++this.seq;
      this.callbacks.set(id, { resolve, reject });
      this.queue.push({ id, type, payload, transfer });
      this._dispatch();
    });
  }

  _dispatch() {
    while (this.queue.length && this.idle.length) {
      const worker = this.idle.pop();
      const task = this.queue.shift();
      worker.busyId = task.id;
      worker.postMessage({ id: task.id, type: task.type, payload: task.payload }, task.transfer);
    }
  }

  _onMessage(worker, event) {
    const { id, result, error } = event.data;
    const cb = this.callbacks.get(id);
    if (cb) {
      this.callbacks.delete(id);
      error ? cb.reject(new Error(error)) : cb.resolve(result);
    }
    worker.busyId = null;
    this.idle.push(worker);
    this._dispatch();
  }

  destroy() {
    this.workers.forEach(w => w.terminate());
    this.workers = [];
    this.idle = [];
  }
}

/* ---------- 案例一：图像灰度处理 ---------- */
// 主线程：把 ImageBitmap 转移给 Worker
const canvas = document.querySelector('#canvas');
const offscreen = canvas.transferControlToOffscreen();
const worker = new Worker('./image-worker.js');

worker.postMessage(
  { type: 'grayscale', canvas: offscreen },
  [offscreen] // 转移所有权
);

/* image-worker.js */
self.onmessage = ({ data }) => {
  const ctx = data.canvas.getContext('2d');
  const img = ctx.getImageData(0, 0, 800, 600);
  const d = img.data;

  for (let i = 0; i < d.length; i += 4) {
    const gray = d[i] * 0.299 + d[i+1] * 0.587 + d[i+2] * 0.114;
    d[i] = d[i+1] = d[i+2] = gray;
  }

  ctx.putImageData(img, 0, 0);
  self.postMessage({ done: true });
};

// 整段像素运算完全在后台线程完成，
// 主线程的滚动、动画丝毫不受影响。

/* ---------- 案例二：大 CSV 文件解析 ---------- */
// 主线程：读取文件并转移 ArrayBuffer
async function parseCSV(file) {
  const buffer = await file.arrayBuffer();
  return new Promise((resolve) => {
    const w = new Worker('./csv-worker.js');
    w.onmessage = (e) => { resolve(e.data); w.terminate(); };
    w.postMessage(buffer, [buffer]); // 零拷贝
  });
}

/* csv-worker.js */
self.onmessage = (e) => {
  const text = new TextDecoder('utf-8').decode(e.data);
  const rows = text.split('\n').map(line => line.split(','));
  const header = rows.shift();

  const records = rows.map(row =>
    Object.fromEntries(header.map((key, i) => [key, row[i]]))
  );

  self.postMessage({ header, records, count: records.length });
};

/* ---------- 方式一：模块化 Worker ---------- */
const worker = new Worker('./worker.js', {
  type: 'module' // 启用 ES Module
});

/* worker.js 中可以直接 import */
import { heavyCompute } from './utils/compute.js';
import { formatResult } from './utils/format.js';

self.onmessage = (e) => {
  self.postMessage(formatResult(heavyCompute(e.data)));
};

/* 传统写法：importScripts */
importScripts('./lib/underscore.js', './lib/math.js');

/* ---------- 方式二：内联 Worker（Blob URL） ---------- */
function createInlineWorker(fn) {
  const code = `
    self.onmessage = function (e) {
      const result = (${fn.toString()})(e.data);
      self.postMessage(result);
    };
  `;

  const blob = new Blob([code], { type: 'application/javascript' });
  const url = URL.createObjectURL(blob);
  return new Worker(url);
}

// 使用示例
const w = createInlineWorker((data) => {
  return data.map(n => n * n).reduce((a, b) => a + b, 0);
});

// 注意：用完记得释放 Blob URL
// URL.revokeObjectURL(url);

/* ---------- 高精度计时 ---------- */
performance.mark('task-start');

worker.postMessage({ type: 'heavy', payload });

worker.onmessage = () => {
  performance.mark('task-end');
  performance.measure('worker-task', 'task-start', 'task-end');

  const [m] = performance.getEntriesByName('worker-task');
  console.log(`总耗时 ${m.duration.toFixed(2)}ms`);
};

/* Worker 内部也可以精确计时 */
self.onmessage = (e) => {
  const t0 = performance.now();
  const result = doHeavyWork(e.data);
  const cost = performance.now() - t0;
  self.postMessage({ result, cost });
};

/* 1. Dedicated Worker —— 专用 Worker */
const w = new Worker('./worker.js');
// 仅当前页面可用，最常见的形态

/* 2. Shared Worker —— 共享 Worker */
const sw = new SharedWorker('./shared.js');
sw.port.start();
sw.port.postMessage('hello');
// 可被多个页面 / iframe 共享同一线程

/* 3. Service Worker —— 网络代理 */
navigator.serviceWorker.register('/sw.js');
// 用于离线缓存、请求拦截、消息推送

/* 4. Worklet —— 渲染管线级扩展 */
CSS.paintWorklet.addModule('paint.js');
audioWorklet.addModule('audio.js');
// 运行在渲染 / 音频线程，用于高性能绘制与音频处理