[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-53d4e6b8-af0a-4d1e-aa7a-2b213f3204bc":3,"$fMDk4yhAN-DGTDd_LprLz5-kzxu5S_Oe5JoCH8j6MV9U":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"53d4e6b8-af0a-4d1e-aa7a-2b213f3204bc","performance-profiling","性能分析原则。测量、分析和优化技术。","cat_life_career","mod_other","sickn33,other","---\nname: performance-profiling\ndescription: \"Performance profiling principles. Measurement, analysis, and optimization techniques.\"\nrisk: unknown\nsource: community\ndate_added: \"2026-02-27\"\n---\n\n# Performance Profiling\n\n> Measure, analyze, optimize - in that order.\n\n## 🔧 Runtime Scripts\n\n**Execute these for automated profiling:**\n\n| Script | Purpose | Usage |\n|--------|---------|-------|\n| `scripts\u002Flighthouse_audit.py` | Lighthouse performance audit | `python scripts\u002Flighthouse_audit.py https:\u002F\u002Fexample.com` |\n\n---\n\n## 1. Core Web Vitals\n\n### Targets\n\n| Metric | Good | Poor | Measures |\n|--------|------|------|----------|\n| **LCP** | \u003C 2.5s | > 4.0s | Loading |\n| **INP** | \u003C 200ms | > 500ms | Interactivity |\n| **CLS** | \u003C 0.1 | > 0.25 | Stability |\n\n### When to Measure\n\n| Stage | Tool |\n|-------|------|\n| Development | Local Lighthouse |\n| CI\u002FCD | Lighthouse CI |\n| Production | RUM (Real User Monitoring) |\n\n---\n\n## 2. Profiling Workflow\n\n### The 4-Step Process\n\n```\n1. BASELINE → Measure current state\n2. IDENTIFY → Find the bottleneck\n3. FIX → Make targeted change\n4. VALIDATE → Confirm improvement\n```\n\n### Profiling Tool Selection\n\n| Problem | Tool |\n|---------|------|\n| Page load | Lighthouse |\n| Bundle size | Bundle analyzer |\n| Runtime | DevTools Performance |\n| Memory | DevTools Memory |\n| Network | DevTools Network |\n\n---\n\n## 3. Bundle Analysis\n\n### What to Look For\n\n| Issue | Indicator |\n|-------|-----------|\n| Large dependencies | Top of bundle |\n| Duplicate code | Multiple chunks |\n| Unused code | Low coverage |\n| Missing splits | Single large chunk |\n\n### Optimization Actions\n\n| Finding | Action |\n|---------|--------|\n| Big library | Import specific modules |\n| Duplicate deps | Dedupe, update versions |\n| Route in main | Code split |\n| Unused exports | Tree shake |\n\n---\n\n## 4. Runtime Profiling\n\n### Performance Tab Analysis\n\n| Pattern | Meaning |\n|---------|---------|\n| Long tasks (>50ms) | UI blocking |\n| Many small tasks | Possible batching opportunity |\n| Layout\u002Fpaint | Rendering bottleneck |\n| Script | JavaScript execution |\n\n### Memory Tab Analysis\n\n| Pattern | Meaning |\n|---------|---------|\n| Growing heap | Possible leak |\n| Large retained | Check references |\n| Detached DOM | Not cleaned up |\n\n---\n\n## 5. Common Bottlenecks\n\n### By Symptom\n\n| Symptom | Likely Cause |\n|---------|--------------|\n| Slow initial load | Large JS, render blocking |\n| Slow interactions | Heavy event handlers |\n| Jank during scroll | Layout thrashing |\n| Growing memory | Leaks, retained refs |\n\n---\n\n## 6. Quick Win Priorities\n\n| Priority | Action | Impact |\n|----------|--------|--------|\n| 1 | Enable compression | High |\n| 2 | Lazy load images | High |\n| 3 | Code split routes | High |\n| 4 | Cache static assets | Medium |\n| 5 | Optimize images | Medium |\n\n---\n\n## 7. Anti-Patterns\n\n| ❌ Don't | ✅ Do |\n|----------|-------|\n| Guess at problems | Profile first |\n| Micro-optimize | Fix biggest issue |\n| Optimize early | Optimize when needed |\n| Ignore real users | Use RUM data |\n\n---\n\n> **Remember:** The fastest code is code that doesn't run. Remove before optimizing.\n\n## When to Use\nThis skill is applicable to execute the workflow or actions described in the overview.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,185,1475,"2026-05-16 13:33:41",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"其他","other","mdi-page-next-outline","其他类型Skill",5,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"职场发展","career","mdi-briefcase-outline","面试准备、简历优化、职业规划",4,575,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"b4f0bbe9-30e7-499e-8a03-7a62e9b5a49c","1.0.0","performance-profiling.zip",2909,"uploads\u002Fskills\u002F53d4e6b8-af0a-4d1e-aa7a-2b213f3204bc\u002Fperformance-profiling.zip","f3381f8e6a397d28d38b9d44cd0a8d02f7c95cf49c988326a172ce77f8733c2f","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":3544},{\"path\":\"scripts\u002Flighthouse_audit.py\",\"isDirectory\":false,\"size\":2657}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]