用BroadcastChannel协调多标签页任务分发与状态同步，Web Worker独立执行计算，通过localStorage防重入、IndexedDB存数据、Service Worker预缓存实现离线容错。
直接用 BroadcastChannel 配合 Web Worker 实现多标签页共享的计算密集型离线任务，核心思路是：**把耗 CPU 的计算逻辑完全交给独立的 Worker 执行，所有标签页只负责分发任务、监听结果，通过 BroadcastChannel 协调状态与广播进度**。这样既避免了页面主线程阻塞，又解决了多页重复计算、资源浪费的问题。
BroadcastChannel 负责跨页协同
BroadcastChannel 在这里不参与实际计算，而是充当“调度广播站”——统一通知任务启停、分片分配、进度更新和最终结果。所有同源标签页都连接到同一个频道（如 'calc-channel'），实现即时通信。
- 一个标签页发起任务时，先通过
bc.postMessage({ type: 'START', taskId, data })广播任务指令 - 其他标签页收到后不自己算，而是记录任务 ID，并准备接收后续的
RESULT或PROGRESS消息 - 当用户在任一标签页关闭或刷新时，可广播
{ type: 'CANCEL', taskId }，Worker 收到后中止对应计算 - 注意：BroadcastChannel 不保证消息顺序，也不提供响应机制，所以关键动作（如“已接收任务”）不需要回执，Worker 只需单向广播结果
Web Worker 承担全部计算负载
使用普通 Worker（非 SharedWorker）即可，因为每个标签页可独立创建并连接同一份 worker.js，但真正执行计算的是 Worker 线程本身——它天然隔离、不阻塞 UI，且多个页面连接到同一个 Worker 文件不会导致多实例（浏览器会复用）。
- Worker 初始化时建立与 BroadcastChannel 的监听：
const bc = new BroadcastChannel('calc-channel') - 监听
START消息，解析参数（如数组长度、算法类型、分片粒度），启动计算循环或调用 WebAssembly 模块 - 计算过程中定期
bc.postMessage({ type: 'PROGRESS', taskId, percent: x })，所有标签页同步看到进度条 - 完成时统一广播
{ type: 'RESULT', taskId, output }，各页按需渲染或缓存 - Worker 内可使用
self.onmessage接收来自本页的控制指令（如暂停），但不建议从页面直接传大量原始数据；推荐先存入 IndexedDB 或 localStorage，再让 Worker 读取路径或 ID
任务唯一性与防重入设计
多标签页可能同时点击“开始计算”，必须确保同一任务只运行一次，避免 CPU 过载。
- Worker 启动前检查
localStorage.getItem('calc_busy')，若存在且未过期（如 5 秒内），直接返回“已在运行” - 首个发起页写入
localStorage.setItem('calc_busy', Date.now().toString())，并设置定时器每 3 秒刷新一次时间戳 - Worker 定期读取该 key，若发现超时或值异常，则主动清理并接管任务
- 所有页面监听
storage事件，一旦检测到calc_busy变更，就切换 UI 状态（如禁用按钮、显示“其他页正在计算”）
离线能力与容错处理
离线场景下，BroadcastChannel 仍可用（纯客户端机制），但需提前加载好 Worker 脚本和必要数据。
- Worker 文件应作为静态资源部署，支持 HTTP 缓存或通过 Service Worker 预缓存
- 计算所需的数据尽量在页面加载时存入 IndexedDB；Worker 启动后从 DB 读取，而非依赖网络请求
- 若计算中途页面关闭，Worker 仍会继续运行（除非被系统终止）；可在完成时尝试
clients.matchAll()获取活跃页面并广播，失败则存入 localStorage，下次页面加载时检查并恢复 UI 状态 - 对长时间任务，建议拆分为小单元（如每 1000 次迭代为一块），支持断点续算：Worker 把当前 offset 存 localStorage，重启后读取继续
