前端性能优化

Area: 前端性能优化

前端性能优化是指通过各种技术手段和方法，提升 Web 应用的性能，从而改善用户体验。

---

领域定义

• 核心范畴：加载性能、渲染性能、运行时性能、资源优化
• 不包括：后端性能优化、网络基础设施优化
• 与相关领域的区别：
  • vs 后端优化：关注浏览器端用户体验
  • vs 安全优化：关注性能指标，非安全性

---

长期目标

• 愿景：建立系统化的性能优化知识体系，能够定位和解决各类性能问题
• 里程碑：
  • 阶段 1：掌握核心 Web 指标和优化方法
  • 阶段 2：建立性能监控体系
  • 阶段 3：深入性能优化原理

---

关键领域

• 核心概念
  • 核心Web指标 — LCP、FID、CLS
  • 浏览器渲染流程 — 理解渲染链路
  • 前端工程化 — 构建优化
• 优化方向
  • 加载性能 — 首屏渲染优化
  • 渲染性能 — 重排重绘优化
  • 运行时性能 — JS 执行效率
  • 资源优化 — 图片、代码分割

---

知识网络

• 上游支撑（理论基础）
  • 浏览器：性能优化的基础
  • HTTP：网络请求优化
• 下游应用（实际使用）
  • 前端开发：实际项目应用
• 协同领域
  • DevOps：持续性能监控

---

FAQ

• Core Web Vitals 包含哪些指标？— LCP、FID、CLS
• 如何检测前端性能？— Chrome DevTools、Lighthouse、WebPageTest
• 性能优化有哪些常见手段？— 代码分割、懒加载、CDN、缓存

---

领域健康度

维度	状态	说明
目标进展	🟡	有相关学习计划
认知更新	🟢	持续补充优化方法
行动频率	🟡	有优化需求时使用