Web Worker是HTML5的API，可在独立线程运行JS代码，避免阻塞主线程；通过postMessage通信，适用于计算密集任务如质数筛选。
JavaScript 是单线程语言，主线程负责页面渲染、事件处理和脚本执行。当遇到大量计算任务时，容易造成页面卡顿。为了解决这个问题，JavaScript 提供了 Web Workers，允许在后台线程中运行脚本，实现并行计算，避免阻塞用户界面。
什么是 Web Worker？
Web Worker 是 HTML5 提供的一个 API，它可以在与主线程隔离的独立线程中运行 JavaScript 代码。由于 Worker 线程不能直接操作 DOM 或访问 window 对象，因此它适用于纯计算任务，比如数据处理、图像分析、加密解密等。
Worker 通过消息机制与主线程通信：使用 postMessage() 发送数据，通过监听 onmessage 接收结果。这种设计保证了线程安全。
如何使用 Web Worker 实现并行计算？
下面是一个简单的例子，展示如何用 Worker 执行耗时计算（如计算质数）：
立即学习“Java免费学习笔记（深入）”；
// worker.js
self.onmessage = function(e) {
const num = e.data;
let primes = [];
for (let i = 2; i < num; i++) {
if (isPrime(i)) primes.push(i);
}
self.postMessage(primes);
};
function isPrime(n) {
for (let i = 2; i <= Math.sqrt(n); i++) {
if (n % i === 0) return false;
}
return true;
}
2. 在主线程中创建 Worker 并通信：
// main.js
const worker = new Worker('worker.js');
worker.onmessage = function(e) {
console.log('找到质数:', e.data);
};
worker.postMessage(10000); // 向 Worker 发送数据
这样，复杂的计算就在后台完成，主线程依然保持流畅响应用户操作。
Worker 的类型与适用场景
- Dedicated Worker：专用于一个调用者（通常是创建它的脚本）。适合单一页面中的独立计算任务。
- Shared Worker：可被多个脚本（如同源的不同页面或 iframe）共享。适用于跨上下文的数据共享计算。
- Service Worker：主要用于网络代理、缓存控制，不直接用于并行计算。
对于大多数并行计算需求，Dedicated Worker 已足够。
注意事项与限制
使用 Web Worker 时需注意以下几点：
- Worker 中无法访问 DOM、window、document 等对象。
- 传递给 Worker 的数据是通过结构化克隆算法复制的，不是共享内存。大数据量传输会有性能开销。
- 可通过 Transferable Objects（如 ArrayBuffer）实现零拷贝传输，提升效率。
- 长时间运行的 Worker 应手动终止（
worker.terminate()），避免资源浪费。
基本上就这些。Web Worker 让 JavaScript 能够突破单线程限制，合理使用可以显著提升应用性能，特别是在处理密集型计算时。不复杂但容易忽略。
