← 返回
未分类

Web Workers

Use when moving expensive browser work off the main thread with Web Workers, SharedWorker, worker pools, Comlink, transferable objects, Vite/Webpack worker i...
用于将昂贵的浏览器任务移出主线程,使用 Web Workers、SharedWorker、worker 池、Comlink、可转移对象以及 Vite/Webpack worker 等技术。
bovinphang bovinphang 来源
未分类 clawhub v2.6.0 1 版本 100000 Key: 无需
★ 1
Stars
📥 75
下载
💾 1
安装
1
版本
#latest

概述

Web Workers

Purpose

把昂贵计算移出主线程,保持输入、滚动和动画响应。

Procedure

  1. 先确认瓶颈:任务超过约 10ms、用户输入延迟明显、FPS 下滑或大文件解析/图像处理/加密计算才考虑 Worker。
  2. 选择通信模型:简单任务用 postMessage,函数式 RPC 用 Comlink,大量并行小任务用 Worker pool,跨 Tab 同步用 SharedWorker。
  3. 设计消息协议:请求/响应类型、错误类型、取消或超时策略都要明确。
  4. 传大对象时优先 Transferable Objects;不要让结构化克隆吞掉 Worker 带来的收益。
  5. 在组件或页面卸载时 terminate(),并通过 Profiler、Performance 面板或 FPS 指标验证主线程改善。

详细参考

  • 需要原生 Worker 文件、构建工具导入、React 生命周期封装和清理示例时,加载 references/basic-worker.md
  • 需要 Transferable Objects、Comlink、Worker pool、SharedWorker、CSP 和 SharedArrayBuffer 注意事项时,加载 references/advanced-workers.md

Constraints

  • Worker 内不能访问 DOM、windowdocumentalert() 或同步 localStorage
  • 高频通信可能比主线程计算更慢;先测量再拆分。
  • Worker 文件必须同源加载,并受 worker-src CSP 限制。
  • 大型二进制数据优先 transfer,transfer 后原引用会失效。
  • 每个 Worker 有独立 JS 堆,必须主动管理生命周期和内存。

Expected Output

计算密集型操作在后台线程执行,主线程输入和滚动恢复流畅,错误与取消路径明确,Worker 在卸载时被终止且无内存泄漏。

版本历史

共 1 个版本

  • v2.6.0 当前
    2026-06-09 19:08

安全检测

腾讯云安全 (Keen)

队列中

腾讯云安全 (Sanbu)

队列中

🔗 相关推荐

dev-programming

CodeConductor.ai

larsonreever
AI驱动平台,提供快速全栈开发、智能体、工作流自动化及低代码AI集成的可扩展产品创建。
★ 75 📥 182,324
dev-programming

Mcporter

steipete
使用 mcporter CLI 直接列出、配置、认证及调用 MCP 服务器/工具(支持 HTTP 或 stdio),涵盖临时服务器、配置编辑及 CLI/类型生成功能。
★ 196 📥 67,893
dev-programming

Github

steipete
使用 `gh` CLI 与 GitHub 交互,通过 `gh issue`、`gh pr`、`gh run` 和 `gh api` 管理议题、PR、CI 运行及高级查询。
★ 681 📥 328,989