前端必看：JS多线程竟让页面快了60秒！

前端开发中，页面卡顿几乎是“老大难问题”。
当你处理一张大图片、跑一个复杂算法时，页面突然“假死”，按钮点不动、动画卡顿……用户体验直接崩盘。

问题的根源是什么？
JavaScript 单线程！

为什么会卡？JS 单线程的“锅”

JavaScript 在浏览器的主线程运行，而主线程不仅要执行 JS 代码，还要负责：

• • 渲染 UI
• • 处理用户交互
• • 执行网络请求回调

一旦有耗时任务（如大数据处理、加密算法）占用主线程，页面就会出现掉帧甚至卡死。

那怎么办？我们能不能把这些“重活”交给别人干？
能！这就是 Web Worker 出场的时刻。

Web Worker 是什么？

简单来说，Web Worker 就是浏览器提供的一种后台运行 JS 的机制。
它可以开一个“独立线程”执行任务，不会阻塞页面渲染。

但要注意：

• • Worker 不能直接操作 DOM。
• • 主线程与 Worker 通过 消息传递（postMessage） 通信，而不是共享内存。

可以把它理解成：

• • 主线程：老板
• • Worker：打工仔
• • 沟通方式：写信（postMessage）

原理核心

• • 每个 Worker 在浏览器底层是独立线程。
• • 通过 结构化克隆算法 复制数据（不是引用传递）。
• • 线程隔离，避免竞争问题。

简单示例：数组计算

假设我们有一个大数组，需要每个元素乘以 2。如果直接在主线程处理，页面会卡顿。
用 Worker 轻松搞定：

1. worker.js

self.onmessage = function(e) {
  const { data } = e;
  // 处理数据
  const result = data.map(item => item * 2);
  // 返回结果
  self.postMessage(result);
};

2. 主线程

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

// 发送数据
worker.postMessage([1, 2, 3, 4, 5]);

// 接收结果
worker.onmessage = function(e) {
  console.log('结果:', e.data); // [2, 4, 6, 8, 10]
};

代码解析

• • new Worker('worker.js')：创建一个独立线程，加载 worker.js 脚本。
• • postMessage()：主线程向 Worker 发送数据。
• • onmessage：接收对方发送的数据。
• • self：Worker 中的全局对象（相当于 window，但没有 DOM）。
• • 结构化克隆：数据是复制，而不是共享引用，避免线程安全问题。

进阶技巧：不用独立文件也能创建 Worker

有时候我们不想单独建文件，可以用 Blob + URL.createObjectURL 动态创建 Worker：

const blob = new Blob([`
  self.onmessage = function(e) {
    const result = e.data.map(n => n * 2);
    self.postMessage(result);
  }
`], { type: 'application/javascript' });

const worker = new Worker(URL.createObjectURL(blob));

worker.postMessage([10, 20, 30]);
worker.onmessage = e => console.log('结果:', e.data);

✅ 优势：代码和逻辑都在同一个文件里，方便打包。

适用场景

• • 大数据计算（如加密、哈希）
• • 图片/视频处理
• • 文件切片上传
• • AI 推理、复杂算法

注意事项

• • Worker 不能访问 DOM、window、alert 等。
• • 数据传输有开销，大对象可用 Transferable 优化。
• • 同源策略：Worker 文件必须同源或通过 Blob 创建。

小结

Web Worker 是前端性能优化的利器，用它把耗时任务扔到后台，页面不卡，用户体验提升一个档次！
下次再遇到卡顿，第一时间想起它！