为什么你的页面总是卡成PPT？90%的前端开发者忽略了这个浏览器原生能力

function processLargeDataset(data) {
  return data.map((item) => {
    // 假设这里有一堆复杂计算
    const result = performHeavyCalculations(item);
    return result;
  });
}

// 用户点击按钮触发
const handleClick = () => {
  const results = processLargeDataset(hugeDataArray);
  setProcessedData(results);
};

用户点击按钮
    │
    ▼
┌─────────────────────────────────────────┐
│  主线程开始疯狂计算... 🔥               │
│  ──────────────────────────────────────  │
│  ❌ 用户点击？排队！                    │
│  ❌ 页面滚动？排队！                    │
│  ❌ 动画渲染？排队！                    │
│  ❌ 输入框打字？排队！                  │
│                                         │
│  主线程：我一个人扛下了所有...😭        │
└─────────────────────────────────────────┘
    │
    ▼（几秒甚至十几秒后）
页面终于恢复响应

┌─────────── 浏览器 ──────────────┐
│                                  │
│  ┌──────────────┐                │
│  │   主线程     │  ◄── 负责 UI  │
│  │  (Main Thread)│      渲染、   │
│  │              │      事件响应  │
│  └──────┬───────┘                │
│         │  postMessage()         │
│         ▼                        │
│  ┌──────────────┐                │
│  │  Web Worker  │  ◄── 负责     │
│  │  (独立线程)   │     重计算    │
│  │              │                │
│  └──────────────┘                │
│                                  │
└──────────────────────────────────┘

通信方式：postMessage / onmessage（消息传递）

// worker.js —— 这是"后厨"的工作脚本
self.onmessage = function (e) {
const data = e.data;

// 所有重计算都在这里执行，完全不影响主线程
const results = data.map((item) => {
    const result = performHeavyCalculations(item);
    return result;
  });

// 算完了，把结果"传菜"回主线程
  self.postMessage(results);
};

// main.js —— 这是"老板"的主线程代码

// 雇一个"后厨"
const dataWorker = new Worker("worker.js");

// 后厨做完了会通知你
dataWorker.onmessage = function (e) {
const results = e.data;
  setProcessedData(results); // 拿到结果更新 UI
};

// 用户点击时，把数据丢给后厨处理
const handleClick = () => {
  dataWorker.postMessage(hugeDataArray);
// 注意：这里不会阻塞！用户该滑动滑动，该点击点击
};

【改造前：单线程硬扛】

  用户点击 ──▶ 主线程开始计算 ──────────────▶ 计算完成 ──▶ 更新UI
                    │
                    │ （期间页面完全冻结 ❄️）
                    │
              用户操作全部卡死


【改造后：Web Worker 分担】

  用户点击 ──▶ 数据发给 Worker ──▶ 主线程继续响应
                    │                    │
                    │                    ▼
                    │              用户正常交互 ✅
                    │              滚动、点击、输入都OK
                    ▼
              Worker 后台计算
                    │
                    ▼
              计算完成，结果回传
                    │
                    ▼
              主线程更新 UI ✅

// worker-with-lodash.js
import _ from"lodash";

self.onmessage = function (e) {
const data = e.data;

// 用 lodash 对销售数据做分组聚合
const processed = _.chain(data)
    .groupBy("category")
    .mapValues((group) => ({
      total: _.sumBy(group, "amount"),
      average: _.meanBy(group, "amount"),
      items: _.sortBy(group, "timestamp"),
    }))
    .value();

  self.postMessage(processed);
};

// main.js
const analyticsWorker = new Worker(
new URL("./worker-with-lodash.js", import.meta.url)
);

analyticsWorker.onmessage = function (e) {
  updateDashboard(e.data);
};

// 模拟十万条销售数据
const salesData = [
  { category: "电子产品", amount: 1200, timestamp: "2024-03-15" },
  { category: "图书", amount: 50, timestamp: "2024-03-14" },
  { category: "电子产品", amount: 800, timestamp: "2024-03-13" },
// ... 想象这里有十万条
];

const processLargeSalesData = () => {
  analyticsWorker.postMessage(salesData);
};

// webpack.config.js
module.exports = {
entry: {
    main: "./src/main.js",
    "worker-with-lodash": "./src/worker-with-lodash.js",
  },
output: {
    filename: "[name].bundle.js",
  },
module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
};

// worker-cdn.js
importScripts("https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js");

self.onmessage = function (e) {
  // 这里的 _ 是全局变量，由 importScripts 引入
  const processed = _.groupBy(e.data, "category");
  self.postMessage(processed);
};

// 普通传递（复制数据，有开销）
worker.postMessage(largeArrayBuffer);

// 转移传递（零拷贝，推荐！）
worker.postMessage(largeArrayBuffer, [largeArrayBuffer]);
// 注意：转移后主线程就无法再访问这个 ArrayBuffer 了

// ✅ 适合丢给 Worker 的：纯计算、数据处理
const heavyCalculation = () => {
  for (let i = 0; i < 1000000; i++) {
    // 复杂数学运算、数据聚合、排序等
  }
};

// ❌ 必须留在主线程的：任何涉及 DOM 的操作
const updateUI = () => {
  document.querySelector(".result").innerHTML = "完成！";
};

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

worker.onerror = function (error) {
  console.error("Worker 出错了：", error.message);
  // 降级方案：回到主线程处理（体验差但至少能用）
  fallbackToMainThread();
};

function cleanup() {
  worker.terminate(); // 任务完成，释放资源
  worker = undefined;
}

创建 Worker
    │
    ├──▶ postMessage() 发送任务
    │        │
    │        ▼
    │    Worker 处理中...
    │        │
    │        ▼
    │    onmessage 接收结果
    │        │
    │        ▼
    │    还有任务？──是──▶ 继续发送任务
    │        │
    │       否
    │        │
    │        ▼
    └──▶ worker.terminate() 释放资源