菜鸟-创作你的创作

HTML5 Web Worker(多线程处理)

lichongyang

下面给你一个 最清晰 + 最实用 + 可直接运行 的 HTML5 Web Worker（多线程）完整教程与示例代码。

✅ 一、Web Worker 是什么？

Web Worker 允许你在 浏览器开辟子线程 来执行耗时任务，例如：

它的特点：

特点说明
✔ 真正的多线程Worker 在浏览器独立线程运行
✔ 不阻塞 UI主线程不会卡顿
✔ 独立作用域Worker 不能直接操作 DOM
✔ 可与主线程通信使用 postMessage()

✅ 二、最小可运行示例（推荐从这里开始）

📄 main.html（主线程）

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Web Worker Demo</title></head>
<body>
  <button id="start">开始计算</button>
  <div id="result"></div>

  <script>
    let worker;

    document.getElementById("start").onclick = () => {
      // 创建 Worker
      worker = new Worker("worker.js");

      // 接收 Worker 结果
      worker.onmessage = function (e) {
        document.getElementById("result").innerText = "计算结果: " + e.data;
        worker.terminate(); // 用完关闭
      };

      // 发送数据到 Worker
      worker.postMessage(100000000); // 给 worker 一个参数
    };
  </script>
</body>
</html>

📄 worker.js（子线程）

// 接收主线程消息
onmessage = function (e) {
  const max = e.data;
  
  // 做一个耗时任务（大量累加）
  let sum = 0;
  for (let i = 0; i < max; i++) {
    sum += i;
  }

  // 把结果返回给主线程
  postMessage(sum);
};

📌 效果：
点击按钮，你会看到 UI 不会卡顿，因为计算在 Worker 线程执行。

✅ 三、Web Worker 的创建方法

const worker = new Worker("worker.js");
worker.postMessage(data);
worker.onmessage = (e) => console.log(e.data);
worker.terminate();

✅ 四、主线程与 Worker 通信

主线程 → Worker

worker.postMessage({ x: 1, y: 2 });

Worker → 主线程

postMessage(result);

双向通信（最通用）

// main.js
worker.onmessage = function (e) {
  console.log("主线程收到:", e.data);
};

// worker.js
self.onmessage = function (e) {
  console.log("worker 收到:", e.data);
};

✅ 五、Worker 内不能做什么？

功能能用吗？
DOM 操作❌ 不能
window 对象❌ 不能访问
document❌ 不能使用
alert / confirm❌ 不能
Ajax（fetch/XMLHttpRequest）✔ 能用
定时器 setTimeout/setInterval✔ 能用
importScripts()✔ 能用
IndexedDB✔ 能用

✅ 六、支持模块 Worker（ES Module）

如果你项目需要 import/ESM，可这样写：

const worker = new Worker("worker.js", { type: "module" });

worker.js:

import { heavyCalc } from "./calc.js";

onmessage = (e) => postMessage(heavyCalc(e.data));

✅ 七、多个 Worker 并行加速

const workers = [];

for (let i = 0; i < 4; i++) {
  workers[i] = new Worker("worker.js");
  workers[i].postMessage(i);
}

用于：

✅ 八、示例：利用 Worker 加速大数组排序 10 倍

main.js

const worker = new Worker("sortWorker.js");

worker.onmessage = (e) => {
  console.log("排序完成", e.data);
};

worker.postMessage(largeArray);

sortWorker.js

onmessage = (e) => {
  const arr = e.data;
  arr.sort((a, b) => a - b);
  postMessage(arr);
};

✅ 九、示例：Worker 执行 fetch

onmessage = async () => {
  const res = await fetch("https://api.example.com/data");
  postMessage(await res.json());
};

🔟 十、Worker 错误捕获

worker.onerror = function (err) {
  console.error("worker error", err.message);
};

退出移动版