js worker 实现原理
JavaScript Worker 的实现原理
JavaScript Worker 允许在主线程之外运行脚本，避免阻塞用户界面。其核心原理基于多线程和事件通信机制。
线程隔离
Worker 运行在独立的线程中，与主线程隔离。这意味着 Worker 无法直接访问 DOM 或主线程的全局变量（如 window 对象），确保线程安全。
通信机制
主线程与 Worker 通过 postMessage 和 onmessage 事件进行通信。数据通过结构化克隆算法传输，支持大多数原生 JavaScript 类型（如对象、数组等），但不支持函数或 DOM 节点。
// 主线程代码
const worker = new Worker('worker.js');
worker.postMessage({ data: 'example' });
worker.onmessage = (e) => console.log(e.data);
// worker.js
self.onmessage = (e) => {
self.postMessage({ response: e.data.data + ' processed' });
};事件循环
Worker 拥有独立的事件循环，可以执行异步操作（如 setTimeout、fetch）。Worker 的全局对象是 self 或 this，而非 window。
类型分类
- Dedicated Worker：与单个主线程绑定，通过直接引用通信。
- Shared Worker：可被多个上下文（如多个标签页）共享，通过端口（
port）通信。 - Service Worker：用于离线缓存和网络代理，生命周期由事件驱动。
数据传输优化
对于大数据传输，可以使用 Transferable 对象（如 ArrayBuffer）实现零拷贝，提升性能：
// 主线程
const buffer = new ArrayBuffer(1024);
worker.postMessage({ buffer }, [buffer]);
// Worker
self.onmessage = (e) => {
const buffer = e.data.buffer; // 直接转移所有权
};错误处理
Worker 中的未捕获错误会触发 onerror 事件：
worker.onerror = (e) => {
console.error(`Worker error: ${e.message}`);
};资源限制
Worker 无法直接加载本地文件（file:// 协议），通常需通过 Web 服务器访问。某些 API（如 localStorage）在 Worker 中不可用。
通过以上机制，Worker 实现了并行计算与主线程无阻塞的目标，适合处理密集型任务（如数据分析、图像处理等）。
