Web Worker 多线程实战：让你的前端应用飞起来

1
const connections = new Set();
2

3
self.onconnect = (event) => {
4
  const port = event.ports[0];
5
  connections.add(port);
6

7
  port.onmessage = (e) => {
8
    const { type, payload } = e.data;
9

10
    switch (type) {
11
      case 'broadcast':
12
        // 向所有连接的页面广播消息
13
        for (const conn of connections) {
14
          conn.postMessage({ type: 'broadcast', payload });
15
        }
16
        break;
17

18
      case 'get-connection-count':
19
        port.postMessage({
20
          type: 'connection-count',
21
          count: connections.size,
22
        });
23
        break;
24

25
      case 'disconnect':
26
        connections.delete(port);
27
        break;
28
    }
29
  };
30

31
  port.start();
32
  // 通知新页面当前的连接数
33
  port.postMessage({
34
    type: 'connected',
35
    count: connections.size,
36
  });
37
};

1
let ws = null;
2
const ports = new Set();
3

4
function initWebSocket() {
5
  ws = new WebSocket('wss://api.example.com/realtime');
6

7
  ws.onmessage = (event) => {
8
    const data = JSON.parse(event.data);
9
    for (const port of ports) {
10
      port.postMessage({ type: 'ws-message', data });
11
    }
12
  };
13

14
  ws.onclose = () => {
15
    // 自动重连
16
    setTimeout(initWebSocket, 3000);
17
  };
18
}
19

20
self.onconnect = (event) => {
21
  const port = event.ports[0];
22
  ports.add(port);
23

24
  if (!ws || ws.readyState === WebSocket.CLOSED) {
25
    initWebSocket();
26
  }
27

28
  port.onmessage = (e) => {
29
    if (e.data.type === 'ws-send' && ws?.readyState === WebSocket.OPEN) {
30
      ws.send(JSON.stringify(e.data.payload));
31
    }
32
    if (e.data.type === 'disconnect') {
33
      ports.delete(port);
34
      if (ports.size === 0 && ws) {
35
        ws.close();
36
        ws = null;
37
      }
38
    }
39
  };
40

41
  port.start();
42
};

1
import * as Comlink from 'comlink';
2

3
const mathService = {
4
  fibonacci(n) {
5
    if (n <= 1) return n;
6
    return this.fibonacci(n - 1) + this.fibonacci(n - 2);
7
  },
8

9
  primeFactors(n) {
10
    const factors = [];
11
    let d = 2;
12
    while (d * d <= n) {
13
      while (n % d === 0) {
14
        factors.push(d);
15
        n /= d;
16
      }
17
      d++;
18
    }
19
    if (n > 1) factors.push(n);
20
    return factors;
21
  },
22

23
  async processLargeArray(data) {
24
    return data.map((x) => Math.sqrt(x) * Math.sin(x));
25
  },
26
};
27

28
Comlink.expose(mathService);

1
import * as Comlink from 'comlink';
2

3
async function main() {
4
  const worker = new Worker('./heavy-math.worker.js', { type: 'module' });
5
  const mathService = Comlink.wrap(worker);
6

7
  // 就像调用本地异步函数！
8
  const fib = await mathService.fibonacci(40);
9
  console.log('Fibonacci(40):', fib);
10

11
  const factors = await mathService.primeFactors(123456789);
12
  console.log('质因数分解:', factors);
13

14
  const processed = await mathService.processLargeArray([1, 2, 3, 4, 5]);
15
  console.log('处理结果:', processed);
16
}
17

18
main();

1
import * as Comlink from 'comlink';
2

3
const service = {
4
  async processWithProgress(data, onProgress) {
5
    const result = [];
6
    for (let i = 0; i < data.length; i++) {
7
      result.push(Math.sqrt(data[i]));
8
      if (i % 1000 === 0) {
9
        await onProgress(Math.round((i / data.length) * 100));
10
      }
11
    }
12
    await onProgress(100);
13
    return result;
14
  },
15
};
16

17
Comlink.expose(service);

1
const worker = new Worker('./image-processor.js');
2

3
async function processImage(file) {
4
  // 读取文件为 ArrayBuffer
5
  const buffer = await file.arrayBuffer();
6

7
  // 转移给 Worker 处理（零拷贝）
8
  worker.postMessage(
9
    { type: 'process', buffer, width: 1920, height: 1080 },
10
    [buffer] // Transfer list
11
  );
12
}
13

14
worker.onmessage = (event) => {
15
  const { processedBuffer, width, height } = event.data;
16
  // 用 ImageData 展示结果
17
  const imageData = new ImageData(
18
    new Uint8ClampedArray(processedBuffer),
19
    width,
20
    height
21
  );
22
  const canvas = document.getElementById('output');
23
  canvas.getContext('2d').putImageData(imageData, 0, 0);
24
};

1
self.onmessage = (event) => {
2
  const { buffer, width, height } = event.data;
3
  const pixels = new Uint8ClampedArray(buffer);
4

5
  // 灰度化处理
6
  for (let i = 0; i < pixels.length; i += 4) {
7
    const gray = pixels[i] * 0.299 + pixels[i + 1] * 0.587 + pixels[i + 2] * 0.114;
8
    pixels[i] = gray;
9
    pixels[i + 1] = gray;
10
    pixels[i + 2] = gray;
11
    // pixels[i + 3] 保持 alpha 不变
12
  }
13

14
  // 处理完毕，Transfer 回主线程
15
  self.postMessage(
16
    { processedBuffer: pixels.buffer, width, height },
17
    [pixels.buffer]
18
  );
19
};

1
let ctx;
2
let width, height;
3

4
self.onmessage = (event) => {
5
  const canvas = event.data.canvas;
6
  ctx = canvas.getContext('2d');
7
  width = canvas.width;
8
  height = canvas.height;
9

10
  // 开始动画循环
11
  animate();
12
};
13

14
function animate() {
15
  // 粒子系统渲染（在 Worker 线程中，不影响主线程）
16
  ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
17
  ctx.fillRect(0, 0, width, height);
18

19
  for (let i = 0; i < 1000; i++) {
20
    const x = Math.random() * width;
21
    const y = Math.random() * height;
22
    const r = Math.random() * 3;
23

24
    ctx.beginPath();
25
    ctx.arc(x, y, r, 0, Math.PI * 2);
26
    ctx.fillStyle = `hsl(${Math.random() * 360}, 80%, 60%)`;
27
    ctx.fill();
28
  }
29

30
  // Worker 中也可以用 requestAnimationFrame
31
  requestAnimationFrame(animate);
32
};

1
self.onmessage = (event) => {
2
  const canvas = event.data.canvas;
3
  const gl = canvas.getContext('webgl2');
4

5
  if (!gl) {
6
    self.postMessage({ error: 'WebGL2 not supported' });
7
    return;
8
  }
9

10
  // 顶点着色器
11
  const vsSource = `#version 300 es
12
    in vec4 aPosition;
13
    in vec4 aColor;
14
    out vec4 vColor;
15
    uniform float uTime;
16

17
    void main() {
18
      vec4 pos = aPosition;
19
      pos.x += sin(uTime + aPosition.y * 3.0) * 0.1;
20
      pos.y += cos(uTime + aPosition.x * 3.0) * 0.1;
21
      gl_Position = pos;
22
      gl_PointSize = 3.0;
23
      vColor = aColor;
24
    }
25
  `;
26

27
  // 片元着色器
28
  const fsSource = `#version 300 es
29
    precision mediump float;
30
    in vec4 vColor;
31
    out vec4 fragColor;
32

33
    void main() {
34
      fragColor = vColor;
35
    }
36
  `;
37

38
  // 编译、链接、渲染循环...
39
  // 所有 WebGL 操作都在 Worker 中完成，主线程完全解放
40
  const startTime = performance.now();
41

42
  function render() {
43
    const time = (performance.now() - startTime) / 1000;
44
    gl.clearColor(0, 0, 0, 1);
45
    gl.clear(gl.COLOR_BUFFER_BIT);
46
    // ... bindBuffer, bindVertexArray, drawArrays 等操作
47
    requestAnimationFrame(render);
48
  }
49

50
  render();
51
};