Web Workers是HTML5提供的API，可在后台线程运行脚本以避免阻塞主线程。通过创建Worker脚本、实例化Worker对象并使用postMessage通信，实现如耗时斐波那契计算等任务，确保页面流畅。
JavaScript 本身是单线程语言，主线程负责 DOM 操作、事件处理和脚本执行。当执行大量计算任务时，页面容易卡顿甚至无响应。Web Workers 提供了一种在后台线程中运行脚本的方式，从而避免阻塞主线程。虽然不能直接操作 DOM，但它是实现“类多线程”编程的关键技术。
Web Workers 是什么？
Web Workers 是 HTML5 提供的 API，允许 JavaScript 在独立于主线程的后台线程中运行。它与主线程之间通过消息机制通信，彼此隔离，确保主线程流畅运行。
常见类型包括：
- Dedicated Worker：专用于创建它的脚本，一对一使用。
- Shared Worker：多个脚本（如不同窗口或 iframe）可共享同一个 Worker。
- Service Worker：主要用于网络代理、缓存和推送通知，不在此文重点讨论。
本文以 Dedicated Worker 为主，展示如何实战应用。
立即学习“Java免费学习笔记（深入）”；
创建和使用 Web Worker
使用 Web Worker 分为三步：创建 Worker 脚本、实例化 Worker 对象、通过 postMessage 通信。
假设我们要执行一个耗时的斐波那契数列计算：
// worker.js
self.onmessage = function(e) {
const n = e.data;
function fib(n) {
if (n
return fib(n - 1) + fib(n - 2);
}
const result = fib(n);
self.postMessage(result);
};
PHP经典实例（第2版）能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边，大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起，足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中，您可以更加方便地找到各种编程问题的解决方案，《PHP经典实例(第2版)》中内容涵盖了：表单处理；Session管理；数据库交互；使用We
// main.js
const worker = new Worker('worker.js');
worker.postMessage(40); // 发送数据到 Worker
worker.onmessage = function(e) {
console.log('结果:', e.data); // 接收返回结果
worker.terminate(); // 使用完毕后终止
};
关键点：
- Worker 构造函数接收一个 JS 文件路径。
- 主线程和 Worker 线程通过 postMessage 发送消息，onmessage 接收。
- Worker 中使用 self 或 this 引用全局上下文。
- 大量计算不会阻塞 UI，用户仍可滚动、点击。
传递复杂数据与性能优化
postMessage 支持结构化克隆算法，可以传递对象、数组、甚至 ArrayBuffer 等，但注意：
- 普通对象会被复制，不是共享内存。
- 对于大数据（如图像像素、大型数组），建议使用 Transferable Objects，如 ArrayBuffer，实现零拷贝传输。
示例：高效传递大数组
// 主线程
const buffer = new ArrayBuffer(1e8); // 1亿字节
const worker = new Worker('processor.js');
worker.postMessage(buffer, [buffer]); // 第二个参数转移所有权
// processor.js
self.onmessage = function(e) {
const data = new Uint8Array(e.data); // 可直接使用
// 处理完成后可回传
self.postMessage(data, [data.buffer]);
};
使用 Transferable Objects 后，传输时间几乎为零，特别适合音视频处理、游戏逻辑等场景。
错误处理与调试技巧
Worker 内部出错不会直接抛到主线程，需监听 error 事件：
worker.onerror = function(e) {
console.error('Worker 错误:', e.message);
console.error('文件:', e.filename, '行号:', e.lineno);
};
调试建议：
- 在 Worker 脚本中使用 console.log，输出会显示在浏览器开发者工具的 Worker 上下文中。
- Chrome DevTools 的 Sources 面板可设置断点，支持调试 Worker 代码。
- 避免在 Worker 中频繁发送消息，合并批量数据更高效。
基本上就这些。Web Workers 让 JavaScript 能有效利用多核 CPU，虽非完全的多线程模型，但在前端工程中已足够应对大多数计算密集型任务。合理使用，可显著提升应用响应性和用户体验。
