Performance Optimization by ariegoldkin/ai-agent-hub
npx skills add https://github.com/ariegoldkin/ai-agent-hub --skill 'Performance Optimization'用于分析和优化全栈应用程序性能的综合框架。
| 指标 | 良好 | 需要改进 |
|---|---|---|
| LCP (最大内容绘制) | < 2.5s | < 4s |
| INP (下一次绘制交互) | < 200ms | < 500ms |
| CLS (累积布局偏移) | < 0.1 | < 0.25 |
| TTFB (首字节时间) | < 200ms | < 600ms |
| 操作 |
|---|
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 目标 |
|---|
| 简单读取 | < 100ms |
| 复杂查询 | < 500ms |
| 写入操作 | < 200ms |
| 索引查找 | < 10ms |
| 类别 | 症状 | 工具 |
|---|---|---|
| 网络 | TTFB 高,加载慢 | 网络面板,WebPageTest |
| 数据库 | 查询慢,连接池耗尽 | EXPLAIN ANALYZE, pg_stat_statements |
| CPU | 使用率高,计算慢 | 性能分析器,火焰图 |
| 内存 | 内存泄漏,GC 停顿 | 堆快照 |
| 渲染 | 布局抖动 | React DevTools,性能面板 |
Seq Scan 转换为 Index Scaninclude 替代循环-- Find slow queries (PostgreSQL)
SELECT query, calls, mean_time / 1000 as mean_seconds
FROM pg_stat_statements ORDER BY total_time DESC LIMIT 10;
-- Verify index usage
EXPLAIN ANALYZE SELECT * FROM orders WHERE user_id = 123;
查看
templates/database-optimization.ts获取 N+1 修复和分页模式
L1: 内存缓存 (LRU, 记忆化) - 最快
L2: 分布式缓存 (Redis/Memcached) - 共享
L3: CDN (边缘,静态资源) - 全局
L4: 数据库 (物化视图) - 后备
const cached = await redis.get(key);
if (cached) return JSON.parse(cached);
const data = await db.query(...);
await redis.setex(key, 3600, JSON.stringify(data));
return data;
查看
templates/caching-patterns.ts获取完整实现
lazy() 进行基于路由的拆分memo(), useCallback(), useMemo()查看
templates/frontend-optimization.tsx获取模式
# Lighthouse audit
lighthouse http://localhost:3000 --output=json
# Bundle analysis
npx @next/bundle-analyzer # Next.js
npx vite-bundle-visualizer # Vite
查看
templates/api-optimization.ts获取中间件示例
查看
templates/performance-metrics.ts获取 Prometheus 指标设置
使用 Opus 4.5 扩展思考来处理:
| 模板 | 用途 |
|---|---|
database-optimization.ts | N+1 修复,分页,连接池 |
caching-patterns.ts | Redis 缓存旁路,记忆化 |
frontend-optimization.tsx | React memo,虚拟化,代码分割 |
api-optimization.ts | 压缩,ETags,字段选择 |
performance-metrics.ts | Prometheus 指标,性能预算 |
每周安装
0
代码仓库
GitHub 星标
8
首次出现
Jan 1, 1970
安全审计
Comprehensive frameworks for analyzing and optimizing application performance across the entire stack.
| Metric | Good | Needs Work |
|---|---|---|
| LCP (Largest Contentful Paint) | < 2.5s | < 4s |
| INP (Interaction to Next Paint) | < 200ms | < 500ms |
| CLS (Cumulative Layout Shift) | < 0.1 | < 0.25 |
| TTFB (Time to First Byte) | < 200ms | < 600ms |
| Operation | Target |
|---|---|
| Simple reads | < 100ms |
| Complex queries | < 500ms |
| Write operations | < 200ms |
| Index lookups | < 10ms |
| Category | Symptoms | Tools |
|---|---|---|
| Network | High TTFB, slow loading | Network tab, WebPageTest |
| Database | Slow queries, pool exhaustion | EXPLAIN ANALYZE, pg_stat_statements |
| CPU | High usage, slow compute | Profiler, flame graphs |
| Memory | Leaks, GC pauses | Heap snapshots |
| Rendering | Layout thrashing | React DevTools, Performance tab |
Seq Scan into Index Scaninclude instead of loops-- Find slow queries (PostgreSQL)
SELECT query, calls, mean_time / 1000 as mean_seconds
FROM pg_stat_statements ORDER BY total_time DESC LIMIT 10;
-- Verify index usage
EXPLAIN ANALYZE SELECT * FROM orders WHERE user_id = 123;
See
templates/database-optimization.tsfor N+1 fixes and pagination patterns
L1: In-Memory (LRU, memoization) - fastest
L2: Distributed (Redis/Memcached) - shared
L3: CDN (edge, static assets) - global
L4: Database (materialized views) - fallback
const cached = await redis.get(key);
if (cached) return JSON.parse(cached);
const data = await db.query(...);
await redis.setex(key, 3600, JSON.stringify(data));
return data;
See
templates/caching-patterns.tsfor full implementation
lazy() for route-based splittingmemo(), useCallback(), useMemo()See
templates/frontend-optimization.tsxfor patterns
# Lighthouse audit
lighthouse http://localhost:3000 --output=json
# Bundle analysis
npx @next/bundle-analyzer # Next.js
npx vite-bundle-visualizer # Vite
See
templates/api-optimization.tsfor middleware examples
See
templates/performance-metrics.tsfor Prometheus metrics setup
Use Opus 4.5 extended thinking for:
| Template | Purpose |
|---|---|
database-optimization.ts | N+1 fixes, pagination, pooling |
caching-patterns.ts | Redis cache-aside, memoization |
frontend-optimization.tsx | React memo, virtualization, code splitting |
api-optimization.ts | Compression, ETags, field selection |
performance-metrics.ts | Prometheus metrics, performance budget |
Weekly Installs
0
Repository
GitHub Stars
8
First Seen
Jan 1, 1970
Security Audits
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装