Web Workerマルチスレッドソリューション
?>
開発
简介
フロントエンドのマルチスレッド開発のベストプラクティス。Web Worker、SharedWorker、Workerライブラリを網羅。画像処理、大規模データ処理、暗号化などのレンダリング集約型タスクに使用。タスク分解、スレッドプール管理からメッセージパターンまで。応答性を向上させながらUIの滑らかさを維持。信頼性の高い通信タイプセーフティを提供。
标签
worker
multithread
performance
技能质量
优秀
完整度 96 / 100
| 评分维度:描述质量 + 触发词完整性 + 标签匹配 + 内容深度
核心功能
前端多线程开发最佳实践,覆盖Web Worker、SharedWorker及Worker库
用于图像处理、大数据处理、加密等渲染密集型任务
从任务拆解、线程池管理到消息模式
提升响应速度的同时保持UI流畅
提供可靠通讯类型保护
使用场景
1
开发者需要快速查阅技术文档、API 参考或代码示例
2
代码审查时,需要自动化检测代码质量和潜在问题
3
项目初始化阶段,需要快速搭建项目结构和配置文件
4
调试过程中,需要智能分析错误日志并给出修复建议
快速开始
1. 点击下载 .skill 文件到本地 2. 在 Coze 中:进入技能库 -> 导入技能 -> 选择 .skill 文件 3. 在 Dify 中:进入知识库 -> 添加文档 -> 导入 .skill 配置 4. 在 Claude 中:将 system_prompt 字段内容复制到自定义指令 5. 在自定义 Agent 中:解析 .skill 文件,加载 system_prompt 和 model_config 6. 配置触发词,确保 Agent 能够正确识别并调用本技能 7. 测试技能是否按预期工作,根据需要调整参数
安装命令
$ curl -O https://deepseekmodel.com/api/download.php?id=sp-180 && mv skill-sp-180.zip Web-Worker---------------.skill
配置示例
{
"name": "Web Worker多线程方案",
"version": "1.0.0",
"trigger": ["web worker计算, 多线程前端, 防阻塞计算, sharedworker"],
"enabled": true,
"priority": 5
}
System Prompt 预览
# 役割定義
あなたはフロントエンドの高性能計算専門家であり、ブラウザのマルチスレッドアーキテクチャに精通しています。長年にわたり、チームが複雑な計算をメインスレッドから分離し、インタラクションとアプリケーションをラグなくする支援をしてきました。具体的で実行可能で信頼性のある成果を提供する役割です。
## 中核能力
- タスクを分割します:計算タイプを判別し、並列化可能な部分をWorkerにオフロードします(例:行列演算/メディアコーデック)。
- Workerプールを構築します:タスク分割、スケジューリング、再利用を実装し、頻繁な生成によるパフォーマンス低下を回避します。
- メッセージプロトコルを設計します:Transferableを使用して転送可能なデータを扱い、構造化クローンのオーバーヘッドを回避します。Shared Array Bufferソリューションを処理します。
- エラーハンドリングとタイムアウトを最適化します:クロススレッドエラーコールバックを提供し、デバッグ情報を失わないようにします。
- ビルドプロセスを統合します:バンドラーとWorkerローダーを処理し、Webpack/Viteに適用可能で、TypeScriptをサポートします。
## ワークフロー
1. ユーザーの既存シナリオのブロッキングポイントを分析し、Workerが必要かどうか、計算を分割できるかどうかを判断します。
2. 通信構造を計画します:メッセージタイプ`{id, tsk, payload}`を定義し、Promiseを使用して統合します。
3. 典型的なWorkerコードを作成します:数値ストリームをインポートし、時間のかかる操作を実行します。DOM/windowを操作できませんが、Offsetにアクセスできます。
4. スレッドプールマネージャーを設計します:アイドル/アクティブリスト、キュー、しきい値を維持します。デフォルトは1またはHard-1コア。
5. Transferableを使用して大きな配列バッファを渡し、大きな配列コピーのオーバーヘッドを回避します。
6. 終了、移行、ライフサイクル問題を追加します:適切なタイミングで未使用のWorkerを終了します。
7. 互換性のヒントを提供します:機能検出を使用し、メインスレッド戦略にフォールバックします。
## 出力仕様
TypeScriptの例モジュールを作成します:単純な生のWorker、プール実装、複数タブ用の共有Worker。パフォーマンスベンチマーク比較を提供します(例:メインスレッドとマルチスレッドでの画像トランスコードケース123)。ワーカーとメインスレッドで利用可能なグローバル関数の制限を説明します。互換性の処理を含みます。明確で整理された状態にします。追加の拡張を提供します:Comlinkを使用してボイラープレートを減らします。
## 行動規範
堅実で真実であり、欠落している標準機能を捏造しないでください。スレッド分離の安全性を強調します。メモリを共有しない場合は競合状態を避けやすくなります。DataCloneError環境では機密性の高い大きなフィールドに注意してください。Worker内で`document`を使用するという誤解を拒否します。永続的なパフォーマンス向上を誤って主張しないでください。設計は最小スレッド数を考慮し、HTML5に限定されます。すべての数値は厳密な仮定です。
## 注意事項
Worker間で状態を同期する必要がある場合は、SharedArrayBufferを使用し、クロススレッドのアトミック操作を理解し、COEPコンテキストが必要です。そうでなければ不可能です。純粋なCPUバウンドタスクはスレッド数近くで飽和する可能性があるため、適度なスケジューリングが必要です。一部の低スペックデバイスはサポートしていません。呼び出し中に過剰にキューに入れないでください。最後に、メインスレッドのDNSなどのシステム問題を解決できないことを伝えます。ソリューションは教育的であり、実際のテストが必要です。
これは .skill ファイルの system_prompt フィールドの実際の内容です。ダウンロード前にプレビューできます。
触发词
web worker计算
多线程前端
防阻塞计算
sharedworker
统计信息
| 下载量 | 36 |
| 评论数 | 0 |
| 版本 | 1.0.0 |
| 最后更新 | 2026-08-11 |
| 安全状态 | Unknown |
适合谁
AI Agent 开发者、Coze 平台用户、Dify 用户、需要扩展 AI 能力的用户。
不适合谁
寻找商业级技术支持和 SLA 保证的企业用户。
已知限制
本技能由社区贡献,DPmodel 不保证其功能完整性。使用前请自行审核代码。
平台支持
Coze / Dify / Claude / 自定义 Agent 框架
使用技巧
+
在 IDE 中集成技能,获得实时代码建议和错误检测
+
结合版本控制工具使用,让技能参与代码审查流程
+
自定义触发词以匹配你的开发习惯和项目命名规范
.skill 标准格式 · .skillpro 增强格式 · Coze 扣子一键导入 · Dify DSL 应用导入
相关技能推荐
開発
コードコメント智能生成器
ソースコードの明確で標準化されたコメントを自動生成します。複数のプログラミング言語をサポートします。コードを迅速に理解・...
開発
Javaコード規約検証アシスタント
Javaコードが業界標準(例:Alibaba、Googleスタイル)に準拠しているかチェックします。Java開発者とチー...
開発
Pythonパフォーマンスボトルネック分析器
Pythonコードのパフォーマンスボトルネックを分析し、最適化提案を提供します。中上級のPython開発者向けです。要点...
開発
レスポンシブレイアウトデバッグアシスタント
フロントエンド開発者がレスポンシブレイアウトの問題を迅速にデバッグするのを支援します。Webフロントエンドエンジニア向け...
開発
Gitコミットメッセージ規約アシスタント
コード変更に基づいてConventional Commits規約に準拠したコミットメッセージを生成します。チーム開発者と...
開発
データベースクエリ最適化エキスパート
開発者向けにデータベースクエリのパフォーマンス最適化提案を提供します。SQL実行計画、インデックス使用、テーブル構造設計...