用 Web Workers 跑游戏逻辑

Web Workers 让你在后台线程跑 JavaScript。对游戏来说，这意味着物理、AI 和程序化生成可以不掉帧地运行。

1）什么时候用 Worker

合适的场景：

• 物理模拟
• 寻路（A*、navmesh）
• AI 决策
• 程序化生成
• 资源处理（图像处理、压缩）
• 复杂数学（FFT、碰撞检测）

不太合适：

• 渲染（Worker 不能直接访问 DOM/Canvas）
• 非常小的任务（线程开销不划算）

2）创建一个基础 Worker

worker.js：

self.onmessage = (e) => {
  const { type, data } = e.data
  
  if (type === 'calculate') {
    const result = heavyCalculation(data)
    self.postMessage({ type: 'result', data: result })
  }
}

function heavyCalculation(input) {
  // 重度计算在这里
  return input * 2
}

main.js：

const worker = new Worker('worker.js')

worker.onmessage = (e) => {
  const { type, data } = e.data
  if (type === 'result') {
    console.log('Got result:', data)
  }
}

worker.postMessage({ type: 'calculate', data: 42 })

3）内联 Worker（不用单独文件）

function createInlineWorker(fn) {
  const blob = new Blob([`(${fn.toString()})()`], { type: 'text/javascript' })
  return new Worker(URL.createObjectURL(blob))
}

const worker = createInlineWorker(() => {
  self.onmessage = (e) => {
    const result = e.data * 2
    self.postMessage(result)
  }
})

4）物理 Worker 示例

physics-worker.js：

const bodies = []
const FIXED_DT = 1 / 60

self.onmessage = (e) => {
  const { type, data } = e.data
  
  switch (type) {
    case 'init':
      initWorld(data)
      break
    case 'step':
      step()
      break
    case 'addBody':
      bodies.push(data)
      break
  }
}

function initWorld(config) {
  // 初始化物理世界
}

function step() {
  // 更新物理
  for (const body of bodies) {
    body.vy += 9.8 * FIXED_DT // 重力
    body.x += body.vx * FIXED_DT
    body.y += body.vy * FIXED_DT
  }
  
  // 把位置发回去
  self.postMessage({
    type: 'positions',
    data: bodies.map(b => ({ id: b.id, x: b.x, y: b.y, rotation: b.rotation }))
  })
}

5）用 transferable 对象提升性能

大数据可以零拷贝地转移：

// 主线程
const positions = new Float32Array(1000)
worker.postMessage(positions, [positions.buffer])
// positions 现在在这里不可用了（已被 transfer）

// Worker
self.onmessage = (e) => {
  const positions = e.data
  // 使用 positions
  self.postMessage(positions, [positions.buffer])
}

6）寻路 Worker

pathfinding-worker.js：

let grid = null

self.onmessage = (e) => {
  const { type, data } = e.data
  
  if (type === 'setGrid') {
    grid = data
  }
  
  if (type === 'findPath') {
    const path = aStar(data.start, data.end, grid)
    self.postMessage({ type: 'path', id: data.id, path })
  }
}

function aStar(start, end, grid) {
  // A* 实现
  const openSet = [start]
  const cameFrom = new Map()
  const gScore = new Map()
  gScore.set(key(start), 0)
  
  while (openSet.length > 0) {
    // ... A* 逻辑
  }
  
  return reconstructPath(cameFrom, end)
}

function key(pos) {
  return `${pos.x},${pos.y}`
}

7）并行任务的 Worker pool

class WorkerPool {
  constructor(workerUrl, size = navigator.hardwareConcurrency || 4) {
    this.workers = []
    this.queue = []
    this.available = []
    
    for (let i = 0; i < size; i++) {
      const worker = new Worker(workerUrl)
      worker.onmessage = (e) => this.handleResult(worker, e)
      this.workers.push(worker)
      this.available.push(worker)
    }
  }
  
  run(data) {
    return new Promise((resolve) => {
      const task = { data, resolve }
      
      if (this.available.length > 0) {
        this.dispatch(this.available.pop(), task)
      } else {
        this.queue.push(task)
      }
    })
  }
  
  dispatch(worker, task) {
    worker._currentTask = task
    worker.postMessage(task.data)
  }
  
  handleResult(worker, e) {
    const task = worker._currentTask
    task.resolve(e.data)
    
    if (this.queue.length > 0) {
      this.dispatch(worker, this.queue.shift())
    } else {
      this.available.push(worker)
    }
  }
  
  terminate() {
    this.workers.forEach(w => w.terminate())
  }
}

8）SharedArrayBuffer 实现实时同步

开启跨域隔离后，可以共享内存：

// 主线程
const shared = new SharedArrayBuffer(1024)
const positions = new Float32Array(shared)

worker.postMessage({ type: 'init', buffer: shared })

// Worker 直接读写共享内存
// 位置更新不再有 postMessage 开销

9）Worker 中的 OffscreenCanvas

在 Worker 中渲染（Chrome、Firefox）：

// 主线程
const canvas = document.getElementById('game')
const offscreen = canvas.transferControlToOffscreen()
worker.postMessage({ canvas: offscreen }, [offscreen])

// Worker
self.onmessage = (e) => {
  const canvas = e.data.canvas
  const ctx = canvas.getContext('2d')
  
  function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    // 绘制...
    requestAnimationFrame(render)
  }
  render()
}

10）错误处理

worker.onerror = (e) => {
  console.error('Worker error:', e.message, e.filename, e.lineno)
}

// Worker 内
self.onerror = (e) => {
  self.postMessage({ type: 'error', message: e.message })
}

相关阅读

• 发布一个快速加载的网页游戏
• 启用 Wasm 线程（SharedArrayBuffer）
• Canvas 2D 游戏循环
• 游戏物理库 —— 在 Worker 里跑 Rapier 或 Cannon-es
• 流式资源加载 —— 在主线程外解码资源
• 2026 年的网页游戏技术栈 —— Worker 在 WebGL/WebGPU/Wasm 栈中的位置

外部资源

• MDN: Web Workers API —— 完整 API 参考
• MDN: Using Web Workers —— 一步步上手指南
• MDN: Transferable objects —— 零拷贝数据转移
• MDN: SharedArrayBuffer —— 线程间共享内存