🔎描述
前端性能优化是指通过各种技术手段和方法，提升 Web 应用的性能，从而改善用户体验。它涵盖了代码优化、资源优化、构建优化、渲染优化和网络优化等方面。
🔗 活跃连接
相关领域（PARA 责任领域）
- 前端工程：「前端性能优化是前端工程的重要组成部分，涉及到代码质量、构建流程等方面。」
- Monorepo：「Monorepo 项目的性能优化需要考虑多模块之间的依赖关系和构建策略。」
- DevOps：「性能监控和告警是 DevOps 流程中的重要环节，可以及时发现和解决性能问题。」
- 产品管理领域：「性能指标和用户体验是产品管理的重要考虑因素，性能优化可以提升用户满意度。」
- 测试领域：「性能测试是保证 Web 应用性能的重要手段，可以发现潜在的性能瓶颈。」
🧱 关键要素
- 性能优化概述：「包含性能优化的概念、目标和重要性。」
- 性能优化方法：「包括代码优化、资源优化、构建优化、渲染优化和网络优化等。」
- 性能优化工具：「例如 Chrome DevTools、Lighthouse、WebPageTest、PageSpeed Insights 和 Sentry 等。」
- 性能监控：「包括 Real User Monitoring (RUM)、Synthetic Monitoring 和 Performance API 等。」
- 核心Web指标(Core Web Vitals)：「包括 Largest Contentful Paint (LCP)、First Input Delay (FID) 和 Cumulative Layout Shift (CLS) 等。」
📚 核心资源
🌟 顶级资产
- Learn Performance | web.dev
- 前端性能优化黄金指南：「系统性的性能优化检查清单和方案。」
- 核心 Web Vitals 优化实践：「针对 LCP、FID 和 CLS 的优化方案。」
- 前端性能监控体系建设经验：「如何搭建完善的性能监控体系。」
- Web 性能优化案例集：「不同场景下的性能优化案例。」
💼 实用工具
- Chrome DevTools 使用手册：「常用功能和技巧说明。」
- Lighthouse 使用手册：「常用功能和技巧说明。」
- WebPageTest 使用手册：「常用功能和技巧说明。」
- PageSpeed Insights 使用手册：「常用功能和技巧说明。」
- Sentry 使用手册：「常用功能和技巧说明。」
⚠️ 挑战与问题
- 技术变革：「3 和 WebAssembly 对性能优化的影响。」
- 工程复杂度：「微前端 和 Serverless 架构下的性能优化。」
- 性能要求：「核心Web指标(Core Web Vitals) 成为衡量用户体验的关键，对优化提出更高要求。」
- 资源缺口：「急需补充 性能测试经验 和 性能监控体系建设经验。」
- 如何在大型项目中平衡 前端性能优化 和 开发效率？
- WebAssembly 在前端性能优化中的应用前景如何？
- Edge Computing 将如何改变前端性能优化？
- 如何量化评估 前端性能优化 的收益并进行有效改进？
- 如何在团队中推广 前端性能优化 的意识和文化？