在面试中回答“从全链路角度分析性能优化”时，需覆盖用户请求到页面渲染的完整链路。以下是结构化回答框架，结合业界实践和最新优化策略：
一、网络传输优化
1. CDN与协议升级
◦ 使用CDN缩短资源物理距离，结合HTTP/2/3的多路复用和头部压缩特性，提升资源加载效率（如WebP/AVIF格式图片通过CDN分发）。
◦ 示例：电商项目通过图片CDN自动转换WebP格式，减少70%带宽占用。
2. 资源压缩与缓存策略
◦ 静态资源启用Gzip/Brotli压缩，代码通过Webpack的TerserPlugin优化；设置强缓存（Cache-Control）和协商缓存（ETag），减少重复请求。
3. 减少请求次数
◦ 合并小文件（如雪碧图）、按需加载非关键资源，通过域名分片突破HTTP/1.1并发限制。
二、资源加载优化
1. 关键路径优化
◦ 内联首屏关键CSS，延迟非关键CSS/JS加载，使用<link rel="preload">预加载核心资源。
◦ 示例：将Lighthouse分数从65提升至92的案例中，通过Webpack代码分割和动态导入实现按需加载。
2. 智能加载策略
◦ 图片懒加载：基于Intersection Observer实现，首屏外图片延迟加载。
◦ 渐进式加载：低质量占位图（LQIP）过渡到高清图，结合Base64内联减少白屏时间。
3. 构建工具优化
◦ Webpack配置SplitChunks
