JavaScript浏览器内置的四大Web Worker的使用详解

// 主线程（main.js）：发起计算请求，接收结果
if (window.Worker) {
  // 1. 创建 Worker 实例
  const sortWorker = new Worker('sort-worker.js');
  
  // 2. 生成 10 万条随机大数据（模拟复杂计算场景）
  const bigData = Array.from({ length: 100000 }, () => Math.random() * 100000);
  
  // 3. 发送数据给 Worker，触发计算
  sortWorker.postMessage(bigData);
  console.log('主线程：已发送数据，等待排序结果...');
  
  // 4. 接收 Worker 返回的计算结果
  sortWorker.onmessage = (e) => {
    console.log('主线程：排序完成，前 10 条数据：', e.data.slice(0, 10));
    sortWorker.terminate(); // 计算完成，销毁 Worker（避免内存泄漏）
  };
  
  // 5. 监听 Worker 错误（如代码报错）
  sortWorker.onerror = (err) => {
    console.error(`Worker 错误：${err.message}（行号：${err.lineno}）`);
    sortWorker.terminate();
  };
} else {
  console.error('当前浏览器不支持 Web Worker');
}
// Worker 线程（sort-worker.js）：执行耗时计算
self.onmessage = (e) => {
  const data = e.data;
  console.log('Worker 线程：开始排序 10 万条数据...');
  
  // 耗时计算（示例用内置排序，实际可替换为快排、归并等复杂算法）
  const sortedData = data.sort((a, b) => a - b);
  
  // 向主线程返回结果
  self.postMessage(sortedData);
  self.close(); // Worker 主动关闭，释放资源
};

// 主线程 - 页面 A（login.html）：登录后同步状态
if (window.SharedWorker) {
  // 1. 创建 Shared Worker 实例
  const sharedWorker = new SharedWorker('sync-worker.js');
  // 2. 激活通信端口（必须调用 start()）
  sharedWorker.port.start();
  
  // 3. 模拟登录按钮点击，发送登录状态给 Worker
  document.getElementById('login-btn').addEventListener('click', () => {
    const userInfo = { username: 'admin', isLogin: true };
    sharedWorker.port.postMessage({ type: 'LOGIN', data: userInfo });
    console.log('页面 A：已发送登录状态');
  });
  
  // 4. 接收 Worker 广播的消息（如其他页面同步的状态）
  sharedWorker.port.onmessage = (e) => {
    console.log('页面 A 收到消息：', e.data);
  };
}
// 主线程 - 页面 B（index.html）：实时获取登录状态
if (window.SharedWorker) {
  const sharedWorker = new SharedWorker('sync-worker.js');
  sharedWorker.port.start();
  
  // 1. 向 Worker 请求当前登录状态
  sharedWorker.port.postMessage({ type: 'QUERY_STATUS' });
  
  // 2. 接收状态（页面 A 登录后，页面 B 实时更新）
  sharedWorker.port.onmessage = (e) => {
    if (e.data.type === 'LOGIN_STATUS') {
      document.getElementById('status').textContent = e.data.isLogin 
        ? `已登录：${e.data.username}` 
        : '未登录';
    }
  };
}
// Shared Worker 线程（sync-worker.js）：维护全局状态，广播消息
const connections = []; // 存储所有连接的页面端口
let globalState = { isLogin: false, username: '' }; // 全局共享状态
// 监听页面连接（新页面打开时触发）
self.onconnect = (e) => {
  const port = e.ports[0];
  connections.push(port); // 记录新连接的页面
  port.start();
  
  // 处理页面发送的消息
  port.onmessage = (msg) => {
    switch (msg.data.type) {
      case 'LOGIN':
        // 更新全局状态
        globalState = msg.data.data;
        // 广播给所有连接的页面（同步状态到页面 A、B...）
        connections.forEach(p => p.postMessage({ 
          type: 'LOGIN_STATUS', 
          ...globalState 
        }));
        break;
      case 'QUERY_STATUS':
        // 单独响应某个页面的状态查询
        port.postMessage({ type: 'LOGIN_STATUS', ...globalState });
        break;
    }
  };
  
  // 页面关闭时，移除端口（避免内存泄漏）
  port.onclose = () => {
    const index = connections.indexOf(port);
    if (index !== -1) connections.splice(index, 1);
  };
};

// 主线程（main.js）：注册 Service Worker，触发离线逻辑
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      // 1. 注册 Service Worker（脚本需在根目录，确保作用域覆盖所有页面）
      const registration = await navigator.serviceWorker.register('/sw.js');
      console.log('Service Worker 注册成功，作用域：', registration.scope);
      
      // 2. 测试离线请求（首次联网缓存，后续断网可访问）
      fetch('/api/data').then(res => res.json()).then(data => {
        console.log('API 请求结果：', data);
      });
    } catch (err) {
      console.error('Service Worker 注册失败：', err);
    }
  });
}
// Service Worker 线程（sw.js）：缓存+请求拦截逻辑
const CACHE_NAME = 'offline-cache-v1'; // 缓存版本（更新时修改版本号）
// 需要缓存的资源列表（静态资源+API接口）
const CACHE_ASSETS = [
  '/', 
  '/index.html',
  '/styles.css',
  '/api/data' // 需缓存的 API 接口
];
// 1. 安装阶段：缓存静态资源（仅首次注册/版本更新时触发）
self.addEventListener('install', (event) => {
  // 等待缓存完成后，再进入激活阶段
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(CACHE_ASSETS)) // 批量缓存资源
      .then(() => self.skipWaiting()) // 跳过等待，立即激活新 Worker（替换旧版本）
  );
});
// 2. 激活阶段：清理旧缓存（避免缓存膨胀）
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      // 删除非当前版本的缓存
      return Promise.all(
        cacheNames.filter(name => name !== CACHE_NAME).map(name => caches.delete(name))
      );
    }).then(() => self.clients.claim()) // 强制所有打开的页面使用新 Worker
  );
});
// 3. 拦截请求：优先从缓存返回，无缓存则请求网络
self.addEventListener('fetch', (event) => {
  // 仅拦截同源的 GET 请求（避免跨域资源和非幂等请求）
  if (event.request.method === 'GET' && event.request.mode === 'same-origin') {
    event.respondWith(
      caches.match(event.request)
        .then(cachedResponse => {
          // 缓存命中：直接返回缓存资源
          if (cachedResponse) {
            console.log('从缓存返回：', event.request.url);
            return cachedResponse;
          }
          // 缓存未命中：发起网络请求，并缓存新结果
          return fetch(event.request).then(networkResponse => {
            caches.open(CACHE_NAME).then(cache => {
              cache.put(event.request, networkResponse.clone()); // 缓存新请求
            });
            return networkResponse;
          });
        })
    );
  }
});

// 主线程（main.js）：注册 Worklet，关联动画
if ('CSSWorklet' in window) {
  try {
    // 注册自定义 Worklet（加载动画逻辑脚本）
    await CSSWorklet.addModule('bounce-worklet.js');
    console.log('CSSWorklet 注册成功');
  } catch (err) {
    console.error('CSSWorklet 注册失败：', err);
  }
}
// HTML 结构：动画元素
/*
<div class="box">弹性动画方块</div>
*/
// CSS 样式：绑定 Worklet 动画
/*
.box {
  width: 100px;
  height: 100px;
  background: red;
  /* 使用 Worklet 定义的动画（名称与 Worklet 中注册一致） */
  animation: bounce 2s infinite;
}
/* 定义动画进度（from→to 对应 Worklet 中的 0→1） */
@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(300px); }
}
*/
// CSSWorklet 线程（bounce-worklet.js）：自定义动画逻辑
class BounceWorklet {
  // 每一帧的计算（嵌入渲染管线，实时执行）
  process(inputs, outputs, parameters) {
    const [t] = inputs; // 动画进度（0~1，from→to）
    const [output] = outputs; // 输出结果（最终的 CSS 样式值）
    
    // 物理弹性公式（模拟重力+反弹效果，非匀速动画）
    const bounce = Math.sin(t * Math.PI) * Math.exp(-t * 0.5);
    // 输出 transform 样式（控制方块位置）
    output.value = `translateY(${300 * (1 - bounce)}px)`;
  }
}
// 注册 Worklet 动画（名称需与 CSS 中的 @keyframes 名称一致）
registerAnimator('bounce', BounceWorklet);

// 主线程（dashboard.js）：整合所有 Worker，协调流程
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      // 1. 第一步：注册 Service Worker（离线缓存）
      const swRegistration = await navigator.serviceWorker.register('/sw.js');
      console.log('Service Worker 注册成功');
      // 2. 第二步：创建 Shared Worker（多页面同步）
      const sharedWorker = new SharedWorker('sync-worker.js');
      sharedWorker.port.start();
      // 3. 第三步：创建 Web Worker（CSV 数据解析）
      const csvWorker = new Worker('csv-worker.js');
      // 4. 第四步：注册 CSSWorklet（图表动画优化）
      if ('CSSWorklet' in window) {
        await CSSWorklet.addModule('chart-worklet.js');
        console.log('CSSWorklet 注册成功');
      }
      // 5. 页面元素：文件上传、图表容器、状态文本
      const fileInput = document.getElementById('file-upload');
      const chartContainer = document.getElementById('chart-container');
      const statusText = document.getElementById('status');
      // 6. 监听文件上传：触发 CSV 解析
      fileInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file && file.name.endsWith('.csv')) {
          statusText.textContent = '正在解析 CSV 文件...';
          csvWorker.postMessage(file); // 发送文件给 Web Worker
        } else {
          statusText.textContent = '请上传 CSV 格式文件！';
        }
      });
      // 7. 接收 Web Worker 解析结果：渲染+同步+缓存
      csvWorker.onmessage = (e) => {
        const analysisResult = e.data; // 解析结果（数据数组+统计信息）
        
        // 7.1 渲染图表（用 CSSWorklet 优化动画）
        renderChart(analysisResult, chartContainer);
        
        // 7.2 同步结果到其他标签页（通过 Shared Worker）
        sharedWorker.port.postMessage({
          type: 'ANALYSIS_RESULT',
          data: analysisResult
        });
        
        // 7.3 缓存结果到 Service Worker（支持离线访问）
        if (navigator.serviceWorker.controller) {
          navigator.serviceWorker.controller.postMessage({
            type: 'CACHE_RESULT',
            key: 'last-csv-analysis',
            data: analysisResult
          });
        }
        
        // 7.4 更新状态文本
        statusText.textContent = `解析完成：共 ${analysisResult.totalCount} 条</doubaocanvas>

// Worker 线程（calc-worker.js）
// self 指向当前 Web Worker 实例，仅用于计算相关逻辑
self.onmessage = (e) => {
  const { num1, num2 } = e.data;
  const sum = num1 + num2; // 简单计算：两数相加
  self.postMessage(sum); // 用 self 向主线程返回结果
  self.close(); // 用 self 主动关闭 Worker，释放资源
};
// 主线程（main.js）- 配合使用
const calcWorker = new Worker('calc-worker.js');
calcWorker.postMessage({ num1: 10, num2: 20 }); // 发数据给 Worker
calcWorker.onmessage = (e) => {
  console.log('计算结果：', e.data); // 输出 30
};

// 主线程
worker.onerror = (err) => {
  console.error(`Worker错误：${err.message}`);
  worker.terminate(); // 出错后销毁Worker，避免内存泄漏
};

// Worker线程
self.onerror = (err) => {
  self.postMessage({ type: 'ERROR', message: err.message });
  self.close(); // 主动关闭
};

if (window.Worker) {
  // 使用Worker
} else {
  // 降级到主线程执行（给用户提示“当前浏览器可能卡顿”）
  heavyTask();
}