Adobe Animate Performance Optimization
Overview
針對 Adobe Animate + CreateJS 專案進行系統性效能優化，識別並修復常見效能瓶頸。
When to Use This Skill
- 完成 Adobe Animate 專案時進行最終效能審查
- 應用程式出現卡頓、記憶體使用過高、或響應變慢
- 重構現有程式碼以改善效能
7 大效能問題
Required References:
references/common-patterns.md- 效能反模式識別與檢測策略references/fix-strategies.md- 具體修復程式碼範例
| # | 問題類型 | 檢測關鍵字 | 優先級 |
|---|---|---|---|
| 1 | Event Listener Memory Leaks | addEventListener 無對應 removeEventListener | P0 |
| 2 | Redundant Event Bindings | init 函數中重複註冊事件 | P1 |
| 3 | Excessive Per-Frame Execution | Ticker.addEventListener("tick") 內有迴圈 | P1 |
| 4 | MovieClip Lifecycle Issues | MovieClip 建立後無.stop() | P2 |
| 5 | Excessive stage.update() | stage.update() 在迴圈內 | P1 |
| 6 | Missing Cache | 複雜靜態圖形未使用 cache() | P3 |
| 7 | Resource Management | 一次載入所有資源、音訊未清理 | P3 |
詳見 references/common-patterns.md 取得完整的檢測模式與程式碼範例。
Performance Analysis Workflow
Required References:
references/common-patterns.md- 問題識別references/fix-strategies.md- 修復實作references/best-practices.md- 程式碼審查標準
Phase 1: Automated Scanning
使用 performance-analyzer agent 掃描程式碼庫：
- 自動檢測 7 大效能問題
- 產出詳細報告（含檔案位置與行號）
- 提供自動修復選項
Phase 2: Manual Review
針對需要判斷的問題進行人工審查：
- 根據 agent 報告進行情境優化
- 查閱
references/fix-strategies.md取得修復範例
Phase 3: Testing
驗證改善效果：
- 使用 NW.js 或瀏覽器 DevTools Performance 面板
- 監控記憶體使用趨勢
- 檢查互動時的 FPS
Triggering the Performance Analyzer
"Check this project for performance issues"
"Optimize the performance"
"檢查效能問題"
"效能優化"performance-analyzer agent 會：
- 掃描 js/ 目錄下所有 JavaScript 檔案
- 識別 7 大效能問題
- 產出報告（含具體位置）
- 詢問是否要自動套用修復