跳到正文
cccskills
免费在 GitHub 公开

fec-web-workers

用于将昂贵的浏览器工作移出主线程,涉及 Web Workers、SharedWorker、worker 池、Comlink、transferable objects、Vite/Webpack worker 集成或 UI 响应性修复。不要用于轻量同步工作或 DOM 操作;中文触发词包括 Web Worker、后台线程、主线程阻塞。

中文简介正在准备中。当前显示原文说明。

实测评分 未实测

查看安装方法

包含的文件(3)

  • SKILL.md2.0 KB
  • references/advanced-workers.md1.3 KB
  • references/basic-worker.md1.6 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Web Workers

用途

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

流程

  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。

约束

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

预期输出

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

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

用于审查或改进前端无障碍、语义结构、键盘支持、焦点管理、ARIA 标签、屏幕阅读器行为、WCAG 2.2 问题、触控无障碍或辅助技术回归;中文触发词包括 无障碍、accessibility、a11y、WCAG、屏幕阅读器。

中文简介正在准备中。当前显示原文说明。

bovinphang/frontend-craft222026年9月26日 更新

Use when reviewing or improving frontend accessibility, semantic structure, keyboard support, focus management, ARIA labels, screen reader behavior, WCAG 2.2 issues, touch accessibility, or assistive-technology regressions; Chinese triggers include accessibility, accessibility, a11y, WCAG, screen reader.

中文简介正在准备中。当前显示原文说明。

bovinphang/frontend-craft222026年9月26日 更新

Use when absorbing ideas, capabilities, workflows, architecture, quality systems, ecosystem extensions, or engineering practices from any reference system into the current project through original, project-native redesign rather than copying.

中文简介正在准备中。当前显示原文说明。

bovinphang/frontend-craft222026年9月26日 更新

用于从参考系统中吸收想法、能力、工作流、架构、质量体系、生态扩展或工程实践,并通过原创的项目内重设计转化为当前项目能力,而不是复制原实现。

中文简介正在准备中。当前显示原文说明。

bovinphang/frontend-craft222026年9月26日 更新

用于设计、实现或审查前后端 API 集成、类型化 API client、REST/tRPC/OpenAPI 客户端选型、认证刷新、API 错误映射、上传流程、SSE/WebSocket/轮询选择、CORS 相关前端行为或跨边界 loading/error 状态。不要用于纯后端服务架构或仅 TanStack Query 缓存策略;中文触发词包括 API 集成、前后端联调、typed API client、接口错误处理、SSE、WebSocket。

中文简介正在准备中。当前显示原文说明。

bovinphang/frontend-craft222026年9月26日 更新

Use when designing, implementing, or reviewing frontend-to-backend API integration, typed API clients, REST/tRPC/OpenAPI client choices, auth refresh, API error mapping, upload flows, SSE/WebSocket/polling choices, CORS-facing frontend behavior, or cross-boundary loading/error states. Do not use for backend-only service architecture or TanStack Query cache policy alone; Chinese triggers include API integration, front-end and back-end joint debugging, typed API client, Interface error handling, SSE, WebSocket.

中文简介正在准备中。当前显示原文说明。

bovinphang/frontend-craft222026年9月26日 更新

查看 bovinphang 的全部技能

报告此技能的问题