前端性能优化的常见方法有哪些？

前端性能优化是指通过各种技术手段提升 Web 应用在不同设备和网络环境的加载速度和渲染效率，以优化用户体验的关键领域。最终目标是在体积和时间层面进行优化：例如减少资源尺寸以快速加载、加快首次渲染时间（FP/FCP）等指标来减少延迟。以下是常见方法的分类描述：

1. 资源最小化与压缩
   • 压缩并合并 CSS 和 JS 文件，减少 HTTP 请求次数（如 Webpack, Rollup 工具实现合并）；减少不必要的 whitespace 和注释，常用工具如 UglifyJS 或 Terser。
     代码示例：

   <!-- 合并 CSS -->
   <link rel="stylesheet" href="combined.css">
   <!-- 压缩 JS -->
   <script src="minified.js"></script>
   

   • 图像优化：选择高效格式（如 WebP），并使用工具（TinyPNG）压缩文件大小；实现方式包括图片懒加载减少初始屏幕外图像加载负担。
     代码示例（WebP 格式支持）：

   <picture>
     <source srcset="image.webp" type="image/webp">
     <img src="image.jpg" alt="图片">
   </picture>
   

2. 懒加载与异步加载
   • 使用 defer 或 async 加载非关键脚本，避免阻塞 DOM 解析；数据与图像懒加载技术（如 IntersectionObserver API）延迟资源直到进入视口（viewport）再加载。
     代码示例：

   <script defer src="essential.js"></script>
   <img data-lazy="image.jpg" alt="懒加载图像">
   

   • 路由懒加载针对大型单页应用，动态导入模块优化初始包体积；常用 Webpack chunk splitting 配置。
     代码示例（Vue）：

   const Profile = () => import('./Profile.vue');
   

3. 缓存策略与优化构建
   • 设置浏览器缓存 header（如 Cache-Control: max-age=31536000）；针对构建工具（Webpack），tree-shaking 移除未使用代码，提高打包缓存效率。
     代码示例（Express 设置缓存）：

   app.use(express.static('public', { maxAge: 31536000 }));
   

   • 应用代码分割（splitChunks）分发不同区块，防止单一文件改动破坏整体缓存；例如划分为 lib/ shared groups。
4. 网络层加速
   • 使用 CDN 分发资源缩短访问延迟；配置 HTTP/2 或 HTTP/3 启用多路复用和 head-of-line blocking缓解；利用 dns-prefetch 预解析域名提升连接速度。
     代码示例（DNS 预解析）：

   <link rel="dns-prefetch" href="//example.com">
   

   • 内联关键 CSS/JS 和减少不必要的 HTTP 请求方式（如组合雪碧图）；资源预加载（preload） 优先加载关键资源加速 FCP。
     代码示例：

   <link rel="preload" href="critical.js" as="script">
   

5. 渲染性能优化
   • 服务端渲染（SSR）生成初始 HTML 减少白屏时间；虚拟 DOM 操作如 Vue diffing 减少页面 reflows/repaints。
   • 优化 CSS 选择器（避免嵌套过深）与组件级渲染（组件化工具如 React 减少 update flows）；布局控制避免连续 DOM 操作防止不必要的回流。
6. 现代化资源技术
   • 升级至最新浏览器协议和压缩算法（如 Brotli）；引入 HTTP/3 QUIC 改善高延迟网络下的传输稳定性。
   • 使用 IndexedDB 和 LocalStorage 管理本地缓存避免数据冗余接口查询。

总体原则是将这些方法集成到开发构建与运维流程，定期监控 Lighthouse metrics（如 LCP）来不断调优。