!MOC-性能

性能优化（Performance）MOC

前端性能优化策略和工具，包括加载性能、运行时性能、资源优化。

学习路径：性能优化贯穿整个开发流程，与 构建工具 配合实现代码优化，与 测试 配合验证优化效果。

---

📚 核心主题

• TTI） — 页面加载性能优化（配合 CSS 优化）
• 长任务） — 运行时性能优化（针对 React 和 Vue 框架）
• 预加载） — 资源优化策略
• 代码分割与按需加载 — 代码分割方案（配合 构建工具 和 工程化）

---

🎯 性能指标

加载性能

• LCP（Largest Contentful Paint）
• FCP（First Contentful Paint）
• TTI（Time to Interactive）
• CLS（Cumulative Layout Shift）

运行时性能

• FPS（Frames Per Second）
• 长任务（Long Tasks）
• 内存泄漏
• 渲染性能

资源优化

• 图片优化
• 字体优化（配合 CSS 优化）
• 代码压缩（配合 构建工具）
• 缓存策略（详见 网络与传输）

---

📝 学习建议

1. 前置知识：需要掌握前端基础（HTML、CSS、JavaScript）和前端框架
2. 学习顺序：基础 → 框架 → 性能优化 → 测试 验证
3. 优化维度：
   • 加载性能：配合 构建工具 优化
   • 运行时性能：配合框架优化（React、Vue）
   • 资源优化：配合 网络与传输 优化
4. 质量保障：性能优化与 测试 和 安全 共同保障代码质量

---

📖 学习资源

• Web Vitals
• Chrome DevTools Performance

---

性能优化 前端性能 web-vitals