animate-performance

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Adobe Animate Performance Optimization

Overview

針對 Adobe Animate + CreateJS 專案進行系統性效能優化，識別並修復常見效能瓶頸。

Systematic performance optimization for Adobe Animate + CreateJS projects, identifying and fixing common performance bottlenecks.

When to Use This Skill

完成 Adobe Animate 專案時進行最終效能審查
應用程式出現卡頓、記憶體使用過高、或響應變慢
重構現有程式碼以改善效能

Conduct final performance reviews when completing Adobe Animate projects
When applications experience stuttering, excessive memory usage, or slow response
Refactor existing code to improve performance

7 大效能問題

7 Major Performance Issues

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

取得完整的檢測模式與程式碼範例。

Required References:

```
references/common-patterns.md
```
- Performance anti-pattern identification and detection strategies
```
references/fix-strategies.md
```
- Specific fix code examples

#	Issue Type	Detection Keywords	Priority
1	Event Listener Memory Leaks	addEventListener without corresponding removeEventListener	P0
2	Redundant Event Bindings	Repeated event registration in init function	P1
3	Excessive Per-Frame Execution	Loops inside Ticker.addEventListener("tick")	P1
4	MovieClip Lifecycle Issues	Missing .stop() after MovieClip creation	P2
5	Excessive stage.update()	stage.update() inside loops	P1
6	Missing Cache	Complex static graphics not using cache()	P3
7	Resource Management	Loading all resources at once, audio not cleaned up	P3

See

references/common-patterns.md

for complete detection patterns and code examples.

Performance Analysis Workflow

Required References:

```
references/common-patterns.md
```
- 問題識別
```
references/fix-strategies.md
```
- 修復實作
```
references/best-practices.md
```
- 程式碼審查標準

Required References:

```
references/common-patterns.md
```
- Issue identification
```
references/fix-strategies.md
```
- Fix implementation
```
references/best-practices.md
```
- Code review standards

Phase 1: Automated Scanning

使用

performance-analyzer

agent 掃描程式碼庫：

自動檢測 7 大效能問題
產出詳細報告（含檔案位置與行號）
提供自動修復選項

Use the

performance-analyzer

agent to scan the codebase:

Automatically detect the 7 major performance issues
Generate a detailed report (including file locations and line numbers)
Provide automatic repair options

Phase 2: Manual Review

針對需要判斷的問題進行人工審查：

根據 agent 報告進行情境優化
查閱
```
references/fix-strategies.md
```
取得修復範例

Conduct manual reviews for issues requiring judgment:

Perform scenario-based optimization based on the agent's report
Refer to
```
references/fix-strategies.md
```
for repair examples

Phase 3: Testing

驗證改善效果：

使用 NW.js 或瀏覽器 DevTools Performance 面板
監控記憶體使用趨勢
檢查互動時的 FPS

Verify improvement effects:

Use NW.js or browser DevTools Performance panel
Monitor memory usage trends
Check FPS during interaction

Triggering the Performance Analyzer

"Check this project for performance issues"
"Optimize the performance"
"檢查效能問題"
"效能優化"

performance-analyzer agent 會：

掃描 js/ 目錄下所有 JavaScript 檔案
識別 7 大效能問題
產出報告（含具體位置）
詢問是否要自動套用修復

"Check this project for performance issues"
"Optimize the performance"
"Check for performance issues"
"Optimize performance"

The performance-analyzer agent will:

Scan all JavaScript files in the js/ directory
Identify the 7 major performance issues
Generate a report (including specific locations)
Ask whether to automatically apply fixes