TypeScript 并发与多线程:进阶篇

面向初学者的在线Python训练器

轻松学习Python,无需理论负担。在浏览器中直接解决带自动检查的实践任务,无需安装任何东西。

开始课程

TypeScript 并发与多线程:进阶篇

\n\n

在现代 Web 开发和服务器端编程中,应用的性能和响应能力至关重要。TypeScript 作为 JavaScript 的超集,继承了其单线程执行模型(事件循环)。然而,对于资源密集型任务(如图像处理、加密、复杂计算),仅靠异步是不够的。在进阶层面,开发者需要理解如何组织真正的多线程以及如何安全地操作共享内存。本文将剖析关键机制:Web Workers(浏览器)、Worker Threads(Node.js)、SharedArrayBuffer 和 Atomics。

\n\n

1. Web Workers:浏览器中的并行

\n\n

Web Workers 是在浏览器环境中于独立线程运行代码的主要方式。Worker 无法访问 DOM,但可以执行繁重计算,而不会阻塞主线程(UI)。

\n\n

在 TypeScript 中创建 Worker 需要编译一个单独的文件。我们来看一个计算大斐波那契数的例子。

\n\n

文件 worker.ts(编译为 worker.js):

\n
// worker.ts\nself.onmessage = (event: MessageEvent<number>) => {\n  const n = event.data;\n  const fib = (num: number): number => {\n    if (num <= 1) return num;\n    return fib(num - 1) + fib(num - 2);\n  };\n  const result = fib(n);\n  self.postMessage(result);\n};
\n\n

文件 main.ts:

\n
// main.ts\nconst worker = new Worker(new URL('./worker.js', import.meta.url));\n\nworker.postMessage(40);\n\nworker.onmessage = (event: MessageEvent<number>) => {\n  console.log(`结果:${event.data}`); // 完成后输出\n  worker.terminate();\n};\n\nworker.onerror = (error) => {\n  console.error('Worker 错误:', error.message);\n};
\n\n

重要注意事项:

\n
    \n
  • Worker 在独立线程中运行,但无法访问主线程的全局变量。
  • \n
  • 数据通过复制(结构化克隆)传递。对于大数据,请使用 Transferable objects(例如 ArrayBuffer)。
  • \n
  • 在 TypeScript 中,务必在消息中指定类型,以避免运行时错误。
  • \n
\n\n

2. Worker Threads:Node.js 中的多线程

\n\n

对于服务器端环境 Node.js,Web Workers 的对应物是 worker_threads 模块。它允许创建具有独立内存(V8 isolate)的隔离线程。这对于 CPU 密集型操作(如哈希计算或 JSON 解析)非常理想。

\n\n

示例:创建用于密码哈希的 Worker(worker.ts):

\n
// crypto-worker.ts\nimport { parentPort, workerData } from 'worker_threads';\nimport { createHash } from 'crypto';\n\nif (parentPort) {\n  const { password, salt } = workerData;\n  const hash = createHash('sha256')\n    .update(password + salt)\n    .digest('hex');\n  parentPort.postMessage(hash);\n}
\n\n

主文件(main.ts):

\n
// main.ts\nimport { Worker } from 'worker_threads';\nimport path from 'path';\n\nfunction hashPassword(password: string, salt: string): Promise<string> {\n  return new Promise((resolve, reject) => {\n    const worker = new Worker(path.resolve(__dirname, 'crypto-worker.js'), {\n      workerData: { password, salt }\n    });\n\n    worker.on('message', resolve);\n    worker.on('error', reject);\n    worker.on('exit', (code) => {\n      if (code !== 0) reject(new Error(`Worker 以代码 ${code} 退出`));\n    });\n  });\n}\n\n(async () => {\n  const hash = await hashPassword('mySecret', 'randomSalt');\n  console.log(`哈希值:${hash}`);\n})();
\n\n

与 Web Workers 的关键区别:

\n
    \n
  • 在 Node.js 中运行,可访问文件系统和进程。
  • \n
  • 通过

博客

书籍推荐