前端性能优化是提升用户体验和页面响应速度的关键，可以从 网络优化、资源优化、缓存优化 三个方面系统地进行。以下是详细说明：
一、网络优化（减少请求数、降低延迟、提升加载速度）
- 减少 HTTP 请求数量
合并请求（CSS、JS 合并打包）
雪碧图（sprite image）
使用字体图标替代小图标
使用 SVG sprite 或 iconfont
- 使用 HTTP/2 或 HTTP/3 协议
多路复用，解决并发限制
头部压缩，减少请求大小
服务器推送资源
- 启用 Gzip/Brotli 压缩
压缩 HTML、CSS、JS 等文本资源
Brotli 相较 Gzip 更优但兼容性稍差
- 使用 CDN（内容分发网络）
缓解服务器压力
靠近用户节点，加速资源加载
可配置边缘缓存、预取策略
- 预连接与预加载
：提前 DNS 查询 ：提前 TCP+TLS 建连 ：优先加载关键资源
二、资源优化（资源本身的大小与加载方式）
- 图片优化
使用现代格式：WebP、AVIF 替代 JPG/PNG
图片压缩（TinyPNG、ImageMagick）
延迟加载（lazyload）：
响应式图片： + srcset
- JavaScript 优化
Tree Shaking 移除无用代码
按需加载（例如按路由/组件懒加载）
动态导入（import()）替代同步加载
拆分大 bundle，利用 Webpack SplitChunksPlugin
- CSS 优化
使用 scoped CSS 或 CSS Module
删除未使用样式（PurgeCSS）
使用 CSS 预处理器精简结构（Less/Sass）
关键路径 CSS 提取（Critical CSS）
- 字体优化
子集字体：只保留使用的字符集
字体懒加载：不阻塞首屏渲染
使用 font-display: swap 提升渲染体验
三、缓存优化（重复访问的资源命中缓存，加快加载）
- 浏览器缓存策略（HTTP 头控制）
强缓存：通过 Cache-Control / Expires 控制有效期
示例：Cache-Control: max-age=31536000
协商缓存：通过 ETag / Last-Modified 协助判断是否修改
服务端返回 304 Not Modified
- 文件指纹 + 缓存失效机制
文件名加 hash 值（如 main.8f3a7.js）
保证更新时能命中最新资源，未更新时用缓存
- 使用 Service Worker 做离线缓存
可实现更灵活的缓存策略，如：
stale-while-revalidate（旧资源立即返回，后台更新新资源）
cache-first、network-first 等策略
提升 PWA 性能，支持离线加载
- 本地存储优化
利用 localStorage / indexedDB 缓存静态数据（如配置项、接口缓存）
注意缓存大小与安全性，防止 XSS 利用
总结
优化维度 核心目标 常见手段
网络优化 降低加载延迟 CDN、Gzip、HTTP/2、预加载、请求合并
资源优化 减小体积、延迟加载 图片压缩、JS/CSS 按需加载、Tree Shaking
缓存优化 重复访问加速 Cache-Control、ETag、Service Worker、文件 hash