引言：为什么需要 Web Worker？
在现代前端开发中，随着应用复杂度不断增加，JavaScript 单线程的限制日益凸显。当处理大量计算、复杂数据操作或需要保持界面流畅时，Web Worker 成为了解决这些问题的关键技术。本文将深入探讨 worker.js 的使用方法，帮助您充分利用多线程提升应用性能。
什么是 Web Worker？
Web Worker 是浏览器提供的 JavaScript 多线程解决方案，允许在后台线程中运行脚本，而不会阻塞主线程。这意味着您可以执行计算密集型任务，同时保持用户界面的响应性。
Web Worker 的类型
- 专用 Worker (Dedicated Worker) ：与单个脚本关联，只能由创建它的脚本访问
- 共享 Worker (Shared Worker) ：可被多个脚本访问，即使这些脚本运行在不同的窗口、iframe 或 worker 中
- Service Worker：主要用于拦截和处理网络请求，实现离线功能
基础使用：创建专用 Worker
1. 创建 Worker 文件
首先，创建一个独立的 worker.js 文件： // worker.js // 监听主线程发送的消息 self.addEventListener('message', function(e) { const data = e.data;
// 执行计算密集型任务 const result = processData(data);
// 将结果发送回主线程 self.postMessage(result); });
// 错误处理 self.addEventListener('error', function(e) { console.error('Worker 发生错误:', e); self.postMessage({ type: 'error', message: e.message }); });
// 处理数据的具体逻辑 function processData(data) { // 示例：计算斐波那契数列（计算密集型任务） function fibonacci(n) { if (n <= 1) return n; return fibonacci(n - 1) + fibonacci(n - 2); }
// 示例：大数据排序
function sortLargeArray(array) {
return array.sort((a, b) => a - b);
}
// 根据接收到的指令执行不同操作 switch (data.command) { case 'fibonacci': return { result: fibonacci(data.value), taskId: data.taskId }; case 'sort': return { result: sortLargeArray(data.array), taskId: data.taskId }; default: throw new Error('未知的命令'); } }
