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

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

// 主線程（main.js）：注冊(cè) Service Worker，觸發(fā)離線邏輯
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      // 1. 注冊(cè) Service Worker（腳本需在根目錄，確保作用域覆蓋所有頁(yè)面）
      const registration = await navigator.serviceWorker.register('/sw.js');
      console.log('Service Worker 注冊(cè)成功，作用域：', registration.scope);
      
      // 2. 測(cè)試離線請(qǐng)求（首次聯(lián)網(wǎng)緩存，后續(xù)斷網(wǎng)可訪問(wèn)）
      fetch('/api/data').then(res => res.json()).then(data => {
        console.log('API 請(qǐng)求結(jié)果：', data);
      });
    } catch (err) {
      console.error('Service Worker 注冊(cè)失?。?, err);
    }
  });
}
// Service Worker 線程（sw.js）：緩存+請(qǐng)求攔截邏輯
const CACHE_NAME = 'offline-cache-v1'; // 緩存版本（更新時(shí)修改版本號(hào)）
// 需要緩存的資源列表（靜態(tài)資源+API接口）
const CACHE_ASSETS = [
  '/', 
  '/index.html',
  '/styles.css',
  '/api/data' // 需緩存的 API 接口
];
// 1. 安裝階段：緩存靜態(tài)資源（僅首次注冊(cè)/版本更新時(shí)觸發(fā)）
self.addEventListener('install', (event) => {
  // 等待緩存完成后，再進(jìn)入激活階段
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(CACHE_ASSETS)) // 批量緩存資源
      .then(() => self.skipWaiting()) // 跳過(guò)等待，立即激活新 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()) // 強(qiáng)制所有打開(kāi)的頁(yè)面使用新 Worker
  );
});
// 3. 攔截請(qǐng)求：優(yōu)先從緩存返回，無(wú)緩存則請(qǐng)求網(wǎng)絡(luò)
self.addEventListener('fetch', (event) => {
  // 僅攔截同源的 GET 請(qǐng)求（避免跨域資源和非冪等請(qǐng)求）
  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ò)請(qǐng)求，并緩存新結(jié)果
          return fetch(event.request).then(networkResponse => {
            caches.open(CACHE_NAME).then(cache => {
              cache.put(event.request, networkResponse.clone()); // 緩存新請(qǐng)求
            });
            return networkResponse;
          });
        })
    );
  }
});

// 主線程（main.js）：注冊(cè) Worklet，關(guān)聯(lián)動(dòng)畫(huà)
if ('CSSWorklet' in window) {
  try {
    // 注冊(cè)自定義 Worklet（加載動(dòng)畫(huà)邏輯腳本）
    await CSSWorklet.addModule('bounce-worklet.js');
    console.log('CSSWorklet 注冊(cè)成功');
  } catch (err) {
    console.error('CSSWorklet 注冊(cè)失敗：', err);
  }
}
// HTML 結(jié)構(gòu)：動(dòng)畫(huà)元素
/*
<div class="box">彈性動(dòng)畫(huà)方塊</div>
*/
// CSS 樣式：綁定 Worklet 動(dòng)畫(huà)
/*
.box {
  width: 100px;
  height: 100px;
  background: red;
  /* 使用 Worklet 定義的動(dòng)畫(huà)（名稱與 Worklet 中注冊(cè)一致） */
  animation: bounce 2s infinite;
}
/* 定義動(dòng)畫(huà)進(jìn)度（from→to 對(duì)應(yīng) Worklet 中的 0→1） */
@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(300px); }
}
*/
// CSSWorklet 線程（bounce-worklet.js）：自定義動(dòng)畫(huà)邏輯
class BounceWorklet {
  // 每一幀的計(jì)算（嵌入渲染管線，實(shí)時(shí)執(zhí)行）
  process(inputs, outputs, parameters) {
    const [t] = inputs; // 動(dòng)畫(huà)進(jìn)度（0~1，from→to）
    const [output] = outputs; // 輸出結(jié)果（最終的 CSS 樣式值）
    
    // 物理彈性公式（模擬重力+反彈效果，非勻速動(dòng)畫(huà)）
    const bounce = Math.sin(t * Math.PI) * Math.exp(-t * 0.5);
    // 輸出 transform 樣式（控制方塊位置）
    output.value = `translateY(${300 * (1 - bounce)}px)`;
  }
}
// 注冊(cè) Worklet 動(dòng)畫(huà)（名稱需與 CSS 中的 @keyframes 名稱一致）
registerAnimator('bounce', BounceWorklet);

// 主線程（dashboard.js）：整合所有 Worker，協(xié)調(diào)流程
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      // 1. 第一步：注冊(cè) Service Worker（離線緩存）
      const swRegistration = await navigator.serviceWorker.register('/sw.js');
      console.log('Service Worker 注冊(cè)成功');
      // 2. 第二步：創(chuàng)建 Shared Worker（多頁(yè)面同步）
      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. 第四步：注冊(cè) CSSWorklet（圖表動(dòng)畫(huà)優(yōu)化）
      if ('CSSWorklet' in window) {
        await CSSWorklet.addModule('chart-worklet.js');
        console.log('CSSWorklet 注冊(cè)成功');
      }
      // 5. 頁(yè)面元素：文件上傳、圖表容器、狀態(tài)文本
      const fileInput = document.getElementById('file-upload');
      const chartContainer = document.getElementById('chart-container');
      const statusText = document.getElementById('status');
      // 6. 監(jiān)聽(tīng)文件上傳：觸發(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 = '請(qǐng)上傳 CSV 格式文件！';
        }
      });
      // 7. 接收 Web Worker 解析結(jié)果：渲染+同步+緩存
      csvWorker.onmessage = (e) => {
        const analysisResult = e.data; // 解析結(jié)果（數(shù)據(jù)數(shù)組+統(tǒng)計(jì)信息）
        
        // 7.1 渲染圖表（用 CSSWorklet 優(yōu)化動(dòng)畫(huà)）
        renderChart(analysisResult, chartContainer);
        
        // 7.2 同步結(jié)果到其他標(biāo)簽頁(yè)（通過(guò) Shared Worker）
        sharedWorker.port.postMessage({
          type: 'ANALYSIS_RESULT',
          data: analysisResult
        });
        
        // 7.3 緩存結(jié)果到 Service Worker（支持離線訪問(wèn)）
        if (navigator.serviceWorker.controller) {
          navigator.serviceWorker.controller.postMessage({
            type: 'CACHE_RESULT',
            key: 'last-csv-analysis',
            data: analysisResult
          });
        }
        
        // 7.4 更新?tīng)顟B(tài)文本
        statusText.textContent = `解析完成：共 ${analysisResult.totalCount} 條</doubaocanvas>

// Worker 線程（calc-worker.js）
// self 指向當(dāng)前 Web Worker 實(shí)例，僅用于計(jì)算相關(guān)邏輯
self.onmessage = (e) => {
  const { num1, num2 } = e.data;
  const sum = num1 + num2; // 簡(jiǎn)單計(jì)算：兩數(shù)相加
  self.postMessage(sum); // 用 self 向主線程返回結(jié)果
  self.close(); // 用 self 主動(dòng)關(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('計(jì)算結(jié)果：', e.data); // 輸出 30
};

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

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

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