Web WorkersJavaScript 的多线程编程什么是 Web WorkersWeb Workers 允许在后台线程中运行脚本不阻塞主线程。Web Workers 的类型类型说明Dedicated Worker专用 Worker只能被创建它的脚本使用Shared Worker共享 Worker可以被多个脚本使用Service Worker服务 Worker用于离线缓存和推送创建 Worker// main.js const worker new Worker(worker.js); worker.postMessage(Hello from main); worker.onmessage (event) { console.log(收到消息:, event.data); }; worker.onerror (error) { console.error(Worker error:, error.message); };// worker.js self.onmessage (event) { console.log(Worker 收到:, event.data); // 处理耗时任务 const result heavyComputation(event.data); self.postMessage(result); }; function heavyComputation(data) { // 耗时计算 return data; }数据传递// 传递基本类型 worker.postMessage(hello); worker.postMessage(42); worker.postMessage(true); // 传递对象会被序列化 worker.postMessage({ name: John, age: 30 }); // 传递二进制数据 const buffer new ArrayBuffer(1024); worker.postMessage(buffer, [buffer]);终止 Worker// 主线程中终止 worker.terminate(); // Worker 内部终止 self.close();Shared Worker// 多个页面共享同一个 Worker const sharedWorker new SharedWorker(shared-worker.js); sharedWorker.port.start(); sharedWorker.port.postMessage(Hello); sharedWorker.port.onmessage (event) { console.log(event.data); };实际应用场景场景一数据处理// worker.js self.onmessage (event) { const data event.data; // 处理大量数据 const result data.map(item processItem(item)); self.postMessage(result); };场景二图像处理// worker.js self.onmessage (event) { const imageData event.data; // 图像处理 for (let i 0; i imageData.data.length; i 4) { // 修改像素 imageData.data[i] 255 - imageData.data[i]; // R imageData.data[i 1] 255 - imageData.data[i 1]; // G imageData.data[i 2] 255 - imageData.data[i 2]; // B } self.postMessage(imageData); };限制const limitations [ 不能访问 DOM, 不能使用 window 对象, 不能访问本地存储, 不能跨域加载脚本 ];最佳实践const bestPractices [ 用于耗时计算, 避免频繁通信, 合理使用传输对象, 处理错误和异常 ];总结Web Workers 为 JavaScript 带来了多线程能力主线程不阻塞提升用户体验并行处理提高计算效率后台任务处理耗时操作简单易用API 简洁明了合理使用 Web Workers提升应用性能。
