Web Worker

什么是 Web Worker？

JavaScript 语言是单线程模型，很容易造成阻塞。然而 Web Worker 的出现，就是为 JavaScript 创造 “多线程” 环境，允许主线程创建 Worker 线程，将一些任务分配给 Worker 处理。

在主线程运行的同时，Worker 在后台运行，互不干扰。

什么时候使用 webworker？

大量的 CPU 密集型任务（大文件上传、图表计算）
任务可被独立拆分。

快速上手

模板main.js - 主线程worker.js - Web Worker 线程

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Web Worker 示例</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

js

// 创建 Worker 实例
const worker = new Worker('worker.js')

// 向 Worker 发送消息
worker.postMessage(5)

// 接收 Worker 返回的消息
worker.onmessage = function (e) {
  console.log('来自 Worker 的结果:', e.data) // 输出: 25
}

// 可选：关闭 Worker
// worker.terminate();

js

self.onmessage = function (e) {
  // 收到主线程消息
  const data = e.data
  // 执行一些计算（比如平方）
  const result = data * data
  // 把结果发回主线程
  self.postMessage(result)
}