在面试中，如果要系统性地阐述前端网站性能优化，你会从哪些关键方面入手？请给出具体的优化策略和理由。
考察说明
考察候选人对前端性能优化体系的全面理解程度和实际落地能力。
回答思路
- 【回答框架 1】前端性能优化首先涉及网络传输层，核心手段包括减少请求数（如资源合并、雪碧图）、减小资源体积（如代码压缩、Gzip）、利用缓存（HTTP缓存、CDN缓存）以及使用HTTP/2多路复用。这些措施直接减少白屏时间。
- 【回答框架 2】其次是渲染层面，重点关注浏览器关键渲染路径。优化措施包括CSS和JavaScript的加载顺序与方式（如将CSS放头部、JS加defer或async）、避免CSS阻塞渲染、减少重排和重绘、使用requestAnimationFrame做动画。目标是缩短首屏可交互时间。
- 【回答框架 3】再次是资源加载策略，可以使用懒加载（图片、路由按需加载）、预加载（关键资源预加载）、预连接（预建立域名连接）等技术，按需获取资源以提升感知性能。
- 【回答框架 4】最后是度量与监控，需要借助性能API（如Navigation Timing、Paint Timing）和工具（如Lighthouse、WebPageTest）来量化性能指标（FCP、LCP、TTI等），并持续监控和优化。这保证了优化有数据支撑，而非盲目进行。
- 【关键点 1】网络层优化：减少请求数、压缩资源、利用缓存和HTTP/2。
- 【关键点 2】渲染层优化：优化关键渲染路径，最小化阻塞。
- 【关键点 3】加载策略：懒加载、预加载、预连接。
- 【关键点 4】度量监控：使用性能API和工具持续优化。
- 【易错点 1】缓存策略不当可能导致资源无法更新，需设置合理的缓存过期时间。
- 【易错点 2】性能优化不应盲目追求指标，需平衡开发效率与用户体验。