Web Worker Implementation：Claude Code 实战指南

Web Workerが必要な場面

JavaScriptはシングル线程で動作するため、重い計算処理はUIをフリーズさせます。Web Workerを使えば、バックグラウンド线程で処理を実行し、メイン线程の応答性を維持可以。借助 Claude Code，类型安全なWeb Worker通信の仕組みを快速构建可以。

类型安全なWeb Worker通信

> TypeScriptで类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型安全なWeb Workerの通信レイヤーを作って。
> メッセージの类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型定義とPromiseベースの呼び出しに支持して。

// worker-types.ts
export interface WorkerRequest {
  id: string;
  type: string;
  payload: any;
}

export interface WorkerResponse {
  id: string;
  result?: any;
  error?: string;
}

// typed-worker.ts
type MessageHandler = (payload: any) => any | Promise<any>;

class TypedWorkerHost {
  private worker: Worker;
  private pending = new Map<string, { resolve: Function; reject: Function }>();
  private counter = 0;

  constructor(workerUrl: string | URL) {
    this.worker = new Worker(workerUrl, { type: 'module' });
    this.worker.onmessage = (e: MessageEvent<WorkerResponse>) => {
      const { id, result, error } = e.data;
      const handler = this.pending.get(id);
      if (!handler) return;
      this.pending.delete(id);
      error ? handler.reject(new Error(error)) : handler.resolve(result);
    };
  }

  call<T>(type: string, payload: any): Promise<T> {
    return new Promise((resolve, reject) => {
      const id = `msg-${++this.counter}`;
      this.pending.set(id, { resolve, reject });
      this.worker.postMessage({ id, type, payload } satisfies WorkerRequest);
    });
  }

  terminate() {
    this.worker.terminate();
    this.pending.forEach(({ reject }) => reject(new Error('Worker terminated')));
    this.pending.clear();
  }
}

ワーカー側の实现

// heavy-computation.worker.ts
const handlers: Record<string, (payload: any) => any> = {
  'sort-data': (data: number[]) => {
    return data.sort((a, b) => a - b);
  },

  'filter-search': ({ items, query }: { items: any[]; query: string }) => {
    return items.filter((item) =>
      Object.values(item).some((v) =>
        String(v).toLowerCase().includes(query.toLowerCase())
      )
    );
  },

  'compute-statistics': (data: number[]) => {
    const n = data.length;
    const mean = data.reduce((a, b) => a + b, 0) / n;
    const sorted = [...data].sort((a, b) => a - b);
    const median = n % 2 === 0
      ? (sorted[n / 2 - 1] + sorted[n / 2]) / 2
      : sorted[Math.floor(n / 2)];
    const variance = data.reduce((sum, x) => sum + (x - mean) ** 2, 0) / n;

    return { mean, median, stdDev: Math.sqrt(variance), min: sorted[0], max: sorted[n - 1] };
  },
};

self.onmessage = async (e: MessageEvent<WorkerRequest>) => {
  const { id, type, payload } = e.data;

  try {
    const handler = handlers[type];
    if (!handler) throw new Error(`Unknown handler: ${type}`);
    const result = await handler(payload);
    self.postMessage({ id, result });
  } catch (error: any) {
    self.postMessage({ id, error: error.message });
  }
};

ワーカープール

> 複数のWorkerを管理するプールを作って。任务を効率よく分散して。

class WorkerPool {
  private workers: TypedWorkerHost[] = [];
  private queue: { type: string; payload: any; resolve: Function; reject: Function }[] = [];
  private busy: Set<number> = new Set();

  constructor(workerUrl: string, poolSize: number = navigator.hardwareConcurrency || 4) {
    for (let i = 0; i < poolSize; i++) {
      this.workers.push(new TypedWorkerHost(new URL(workerUrl, import.meta.url)));
    }
  }

  async execute<T>(type: string, payload: any): Promise<T> {
    const freeIndex = this.workers.findIndex((_, i) => !this.busy.has(i));

    if (freeIndex === -1) {
      return new Promise((resolve, reject) => {
        this.queue.push({ type, payload, resolve, reject });
      });
    }

    return this.runOnWorker(freeIndex, type, payload);
  }

  private async runOnWorker<T>(index: number, type: string, payload: any): Promise<T> {
    this.busy.add(index);
    try {
      return await this.workers[index].call<T>(type, payload);
    } finally {
      this.busy.delete(index);
      this.processQueue();
    }
  }

  private processQueue() {
    if (this.queue.length === 0) return;
    const freeIndex = this.workers.findIndex((_, i) => !this.busy.has(i));
    if (freeIndex === -1) return;

    const task = this.queue.shift()!;
    this.runOnWorker(freeIndex, task.type, task.payload)
      .then(task.resolve)
      .catch(task.reject);
  }

  terminate() {
    this.workers.forEach((w) => w.terminate());
  }
}

Reactフックでの活用

function useWorker<T>(type: string, payload: any, deps: any[]) {
  const [result, setResult] = useState<T | null>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    pool.execute<T>(type, payload)
      .then(setResult)
      .finally(() => setLoading(false));
  }, deps);

  return { result, loading };
}

总结

借助 Claude Code，类型安全なWeb Worker通信からワーカープールまで、并行処理基盤を高效地构建可以。性能全般は性能优化を、Service Workerとの違いはService Worker活用。

Web Worker API的规范请参阅MDN Web Docs - Web Workers。