// 主線程（main.js）：發(fā)起計算請求，接收結(jié)果
if (window.Worker) {
  // 1. 創(chuàng)建 Worker 實例
  const sortWorker = new Worker('sort-worker.js');
  
  // 2. 生成 10 萬條隨機大數(shù)據(jù)（模擬復(fù)雜計算場景）
  const bigData = Array.from({ length: 100000 }, () => Math.random() * 100000);
  
  // 3. 發(fā)送數(shù)據(jù)給 Worker，觸發(fā)計算
  sortWorker.postMessage(bigData);
  console.log('主線程：已發(fā)送數(shù)據(jù)，等待排序結(jié)果...');
  
  // 4. 接收 Worker 返回的計算結(jié)果
  sortWorker.onmessage = (e) => {
    console.log('主線程：排序完成，前 10 條數(shù)據(jù)：', e.data.slice(0, 10));
    sortWorker.terminate(); // 計算完成，銷毀 Worker（避免內(nèi)存泄漏）
  };
  
  // 5. 監(jiān)聽 Worker 錯誤（如代碼報錯）
  sortWorker.onerror = (err) => {
    console.error(`Worker 錯誤：${err.message}（行號：${err.lineno}）`);
    sortWorker.terminate();
  };
} else {
  console.error('當(dāng)前瀏覽器不支持 Web Worker');
}
// Worker 線程（sort-worker.js）：執(zhí)行耗時計算
self.onmessage = (e) => {
  const data = e.data;
  console.log('Worker 線程：開始排序 10 萬條數(shù)據(jù)...');
  
  // 耗時計算（示例用內(nèi)置排序，實際可替換為快排、歸并等復(fù)雜算法）
  const sortedData = data.sort((a, b) => a - b);
  
  // 向主線程返回結(jié)果
  self.postMessage(sortedData);
  self.close(); // Worker 主動關(guān)閉，釋放資源
};

// 主線程 - 頁面 A（login.html）：登錄后同步狀態(tài)
if (window.SharedWorker) {
  // 1. 創(chuàng)建 Shared Worker 實例
  const sharedWorker = new SharedWorker('sync-worker.js');
  // 2. 激活通信端口（必須調(diào)用 start()）
  sharedWorker.port.start();
  
  // 3. 模擬登錄按鈕點擊，發(fā)送登錄狀態(tài)給 Worker
  document.getElementById('login-btn').addEventListener('click', () => {
    const userInfo = { username: 'admin', isLogin: true };
    sharedWorker.port.postMessage({ type: 'LOGIN', data: userInfo });
    console.log('頁面 A：已發(fā)送登錄狀態(tài)');
  });
  
  // 4. 接收 Worker 廣播的消息（如其他頁面同步的狀態(tài)）
  sharedWorker.port.onmessage = (e) => {
    console.log('頁面 A 收到消息：', e.data);
  };
}
// 主線程 - 頁面 B（index.html）：實時獲取登錄狀態(tài)
if (window.SharedWorker) {
  const sharedWorker = new SharedWorker('sync-worker.js');
  sharedWorker.port.start();
  
  // 1. 向 Worker 請求當(dāng)前登錄狀態(tài)
  sharedWorker.port.postMessage({ type: 'QUERY_STATUS' });
  
  // 2. 接收狀態(tài)（頁面 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）：維護全局狀態(tài)，廣播消息
const connections = []; // 存儲所有連接的頁面端口
let globalState = { isLogin: false, username: '' }; // 全局共享狀態(tài)
// 監(jiān)聽頁面連接（新頁面打開時觸發(fā)）
self.onconnect = (e) => {
  const port = e.ports[0];
  connections.push(port); // 記錄新連接的頁面
  port.start();
  
  // 處理頁面發(fā)送的消息
  port.onmessage = (msg) => {
    switch (msg.data.type) {
      case 'LOGIN':
        // 更新全局狀態(tài)
        globalState = msg.data.data;
        // 廣播給所有連接的頁面（同步狀態(tài)到頁面 A、B...）
        connections.forEach(p => p.postMessage({ 
          type: 'LOGIN_STATUS', 
          ...globalState 
        }));
        break;
      case 'QUERY_STATUS':
        // 單獨響應(yīng)某個頁面的狀態(tài)查詢
        port.postMessage({ type: 'LOGIN_STATUS', ...globalState });
        break;
    }
  };
  
  // 頁面關(guān)閉時，移除端口（避免內(nèi)存泄漏）
  port.onclose = () => {
    const index = connections.indexOf(port);
    if (index !== -1) connections.splice(index, 1);
  };
};

// 主線程（main.js）：注冊 Service Worker，觸發(fā)離線邏輯
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. 測試離線請求（首次聯(lián)網(wǎng)緩存，后續(xù)斷網(wǎng)可訪問）
      fetch('/api/data').then(res => res.json()).then(data => {
        console.log('API 請求結(jié)果：', data);
      });
    } catch (err) {
      console.error('Service Worker 注冊失?。?, err);
    }
  });
}
// Service Worker 線程（sw.js）：緩存+請求攔截邏輯
const CACHE_NAME = 'offline-cache-v1'; // 緩存版本（更新時修改版本號）
// 需要緩存的資源列表（靜態(tài)資源+API接口）
const CACHE_ASSETS = [
  '/', 
  '/index.html',
  '/styles.css',
  '/api/data' // 需緩存的 API 接口
];
// 1. 安裝階段：緩存靜態(tài)資源（僅首次注冊/版本更新時觸發(fā)）
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 => {
      // 刪除非當(dāng)前版本的緩存
      return Promise.all(
        cacheNames.filter(name => name !== CACHE_NAME).map(name => caches.delete(name))
      );
    }).then(() => self.clients.claim()) // 強制所有打開的頁面使用新 Worker
  );
});
// 3. 攔截請求：優(yōu)先從緩存返回，無緩存則請求網(wǎng)絡(luò)
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;
          }
          // 緩存未命中：發(fā)起網(wǎng)絡(luò)請求，并緩存新結(jié)果
          return fetch(event.request).then(networkResponse => {
            caches.open(CACHE_NAME).then(cache => {
              cache.put(event.request, networkResponse.clone()); // 緩存新請求
            });
            return networkResponse;
          });
        })
    );
  }
});

// 主線程（main.js）：注冊 Worklet，關(guān)聯(lián)動畫
if ('CSSWorklet' in window) {
  try {
    // 注冊自定義 Worklet（加載動畫邏輯腳本）
    await CSSWorklet.addModule('bounce-worklet.js');
    console.log('CSSWorklet 注冊成功');
  } catch (err) {
    console.error('CSSWorklet 注冊失?。?, err);
  }
}
// HTML 結(jié)構(gòu)：動畫元素
/*
<div class="box">彈性動畫方塊</div>
*/
// CSS 樣式：綁定 Worklet 動畫
/*
.box {
  width: 100px;
  height: 100px;
  background: red;
  /* 使用 Worklet 定義的動畫（名稱與 Worklet 中注冊一致） */
  animation: bounce 2s infinite;
}
/* 定義動畫進度（from→to 對應(yīng) Worklet 中的 0→1） */
@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(300px); }
}
*/
// CSSWorklet 線程（bounce-worklet.js）：自定義動畫邏輯
class BounceWorklet {
  // 每一幀的計算（嵌入渲染管線，實時執(zhí)行）
  process(inputs, outputs, parameters) {
    const [t] = inputs; // 動畫進度（0~1，from→to）
    const [output] = outputs; // 輸出結(jié)果（最終的 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，協(xié)調(diào)流程
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. 第二步：創(chuàng)建 Shared Worker（多頁面同步）
      const sharedWorker = new SharedWorker('sync-worker.js');
      sharedWorker.port.start();
      // 3. 第三步：創(chuàng)建 Web Worker（CSV 數(shù)據(jù)解析）
      const csvWorker = new Worker('csv-worker.js');
      // 4. 第四步：注冊 CSSWorklet（圖表動畫優(yōu)化）
      if ('CSSWorklet' in window) {
        await CSSWorklet.addModule('chart-worklet.js');
        console.log('CSSWorklet 注冊成功');
      }
      // 5. 頁面元素：文件上傳、圖表容器、狀態(tài)文本
      const fileInput = document.getElementById('file-upload');
      const chartContainer = document.getElementById('chart-container');
      const statusText = document.getElementById('status');
      // 6. 監(jiān)聽文件上傳：觸發(fā) CSV 解析
      fileInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file && file.name.endsWith('.csv')) {
          statusText.textContent = '正在解析 CSV 文件...';
          csvWorker.postMessage(file); // 發(fā)送文件給 Web Worker
        } else {
          statusText.textContent = '請上傳 CSV 格式文件！';
        }
      });
      // 7. 接收 Web Worker 解析結(jié)果：渲染+同步+緩存
      csvWorker.onmessage = (e) => {
        const analysisResult = e.data; // 解析結(jié)果（數(shù)據(jù)數(shù)組+統(tǒng)計信息）
        
        // 7.1 渲染圖表（用 CSSWorklet 優(yōu)化動畫）
        renderChart(analysisResult, chartContainer);
        
        // 7.2 同步結(jié)果到其他標(biāo)簽頁（通過 Shared Worker）
        sharedWorker.port.postMessage({
          type: 'ANALYSIS_RESULT',
          data: analysisResult
        });
        
        // 7.3 緩存結(jié)果到 Service Worker（支持離線訪問）
        if (navigator.serviceWorker.controller) {
          navigator.serviceWorker.controller.postMessage({
            type: 'CACHE_RESULT',
            key: 'last-csv-analysis',
            data: analysisResult
          });
        }
        
        // 7.4 更新狀態(tài)文本
        statusText.textContent = `解析完成：共 ${analysisResult.totalCount} 條</doubaocanvas>

// Worker 線程（calc-worker.js）
// self 指向當(dāng)前 Web Worker 實例，僅用于計算相關(guān)邏輯
self.onmessage = (e) => {
  const { num1, num2 } = e.data;
  const sum = num1 + num2; // 簡單計算：兩數(shù)相加
  self.postMessage(sum); // 用 self 向主線程返回結(jié)果
  self.close(); // 用 self 主動關(guān)閉 Worker，釋放資源
};
// 主線程（main.js）- 配合使用
const calcWorker = new Worker('calc-worker.js');
calcWorker.postMessage({ num1: 10, num2: 20 }); // 發(fā)數(shù)據(jù)給 Worker
calcWorker.onmessage = (e) => {
  console.log('計算結(jié)果：', e.data); // 輸出 30
};

// 主線程
worker.onerror = (err) => {
  console.error(`Worker錯誤：${err.message}`);
  worker.terminate(); // 出錯后銷毀Worker，避免內(nèi)存泄漏
};

// Worker線程
self.onerror = (err) => {
  self.postMessage({ type: 'ERROR', message: err.message });
  self.close(); // 主動關(guān)閉
};

if (window.Worker) {
  // 使用Worker
} else {
  // 降級到主線程執(zhí)行（給用戶提示“當(dāng)前瀏覽器可能卡頓”）
  heavyTask();
}