大前端

主题

🚀 前端性能优化指南 ​

从代码层面到工程层面，全方位提升 Web 应用性能

10+优化方向
50+优化技巧
3X性能提升

📚 学习路径 ​

性能优化是前端工程师必备技能，建议按以下路径系统学习：

mermaid
graph LR
    A[性能指标] --> B[加载优化]
    B --> C[渲染优化]
    C --> D[代码优化]
    D --> E[构建优化]
    E --> F[监控分析]

🎯 核心性能指标 ​

Web Vitals 核心指标 ​

LCP (Largest Contentful Paint)

  • 📊 衡量指标：最大内容绘制时间
  • 🎯 目标值：< 2.5s
  • 💡 优化方向：优化图片、预加载关键资源

FID (First Input Delay)

  • 📊 衡量指标：首次输入延迟
  • 🎯 目标值：< 100ms
  • 💡 优化方向：减少 JavaScript 执行时间

CLS (Cumulative Layout Shift)

  • 📊 衡量指标：累积布局偏移
  • 🎯 目标值：< 0.1
  • 💡 优化方向：指定图片尺寸、避免动态注入内容

🏗️ 优化体系 ​

1️⃣ 网络层面优化 ​

📦 资源加载优化 ​

  • HTTP/2 多路复用：并行加载多个资源
  • CDN 加速：就近访问，降低延迟
  • 资源压缩：Gzip/Brotli 压缩
  • 资源合并：减少 HTTP 请求数
  • 懒加载：按需加载图片和组件

🎨 图片优化 ​

  • 格式选择：WebP、AVIF 等现代格式
  • 响应式图片：srcset、picture 标签
  • 图片压缩：TinyPNG、ImageOptim
  • 渐进式加载：LQIP、BlurHash
  • Sprite 图：小图标合并

🌐 缓存策略 ​

  • 强缓存：Cache-Control、Expires
  • 协商缓存：ETag、Last-Modified
  • Service Worker：离线缓存
  • 本地存储：localStorage、IndexedDB

2️⃣ 渲染层面优化 ​

🎬 首屏优化 ​

  • 关键 CSS 内联：首屏样式直接注入
  • 预渲染：SSR、SSG
  • 骨架屏：优化加载体验
  • 代码分割：按路由拆分代码
  • 预加载：preload、prefetch

⚡ 运行时优化 ​

  • 减少重排重绘：批量 DOM 操作
  • 虚拟滚动：长列表优化
  • 防抖节流：高频事件优化
  • Web Worker：多线程计算
  • requestAnimationFrame：动画优化

🖼️ CSS 优化 ​

  • 移除未使用的 CSS：PurgeCSS
  • CSS-in-JS 优化：运行时 vs 编译时
  • CSS 选择器优化：避免深层嵌套
  • 避免 @import：阻塞渲染
  • CSS 包含块：优化重排范围

3️⃣ 代码层面优化 ​

💻 JavaScript 优化 ​

  • Tree Shaking：移除死代码
  • 按需引入：只引入使用的模块
  • 避免内存泄漏：及时清理事件监听
  • 使用 Web API：优先使用原生方法
  • 减少闭包：避免不必要的作用域链

🔧 框架优化 ​

  • 组件懒加载：路由级别代码分割
  • 虚拟列表：长列表渲染优化
  • Memo/PureComponent：避免重复渲染
  • 状态管理优化：合理拆分 Store
  • 服务端渲染：SSR/SSG

📦 第三方库优化 ​

  • 按需引入：lodash-es、antd
  • CDN 引入：减小打包体积
  • 替换轻量库：dayjs 替代 moment
  • 自己实现：简单功能不依赖库

4️⃣ 构建层面优化 ​

🏭 Webpack/Vite 优化 ​

  • 开启压缩：TerserPlugin、esbuild
  • 代码分割：SplitChunks
  • 持久化缓存：cache-loader
  • 并行构建：thread-loader
  • 分析打包体积：webpack-bundle-analyzer

📏 资源优化 ​

  • 资源压缩：HTML、CSS、JS 压缩
  • 文件名 Hash：长期缓存
  • 动态 Polyfill：按需加载
  • Source Map：生产环境按需开启

5️⃣ 监控与分析 ​

📊 性能监控工具 ​

  • Lighthouse：综合性能评估
  • Chrome DevTools：性能分析
  • WebPageTest：多地域测试
  • Performance API：自定义监控

🔍 性能分析方法 ​

  • 火焰图分析：找出性能瓶颈
  • Coverage 分析：发现未使用代码
  • Network 分析：优化资源加载
  • Memory 分析：排查内存泄漏

📝 实战案例 ​

案例 1：首屏加载优化 ​

优化前

  • 首屏时间：4.5s
  • 白屏时间：2.8s
  • 资源总大小：3.2MB

优化措施

  1. 图片懒加载 + WebP 格式
  2. 关键 CSS 内联
  3. 路由懒加载
  4. 开启 Gzip 压缩
  5. 使用 CDN 加速

优化后

  • 首屏时间：1.8s ⬇️ 60%
  • 白屏时间：0.9s ⬇️ 68%
  • 资源总大小：1.1MB ⬇️ 66%

案例 2：长列表优化 ​

问题：10000+ 数据渲染卡顿

解决方案

javascript
// 使用虚拟滚动
import VirtualList from 'vue-virtual-scroll-list'

// 只渲染可视区域 + 缓冲区
const visibleCount = Math.ceil(height / itemHeight) + bufferSize

效果

  • FPS：15 → 60
  • 内存占用：减少 80%
  • 滚动流畅度：显著提升

🎓 学习资源 ​

推荐阅读 ​

工具推荐 ​

在线检测 ​

💡 优化建议 ​

快速见效的优化 ​

  1. ✅ 开启 Gzip/Brotli 压缩
  2. ✅ 图片使用 WebP 格式
  3. ✅ 启用浏览器缓存
  4. ✅ 使用 CDN 加速
  5. ✅ 压缩 CSS/JS 文件

中期优化目标 ​

  1. 🎯 实现路由懒加载
  2. 🎯 优化首屏加载
  3. 🎯 移除未使用代码
  4. 🎯 实现资源预加载
  5. 🎯 优化第三方库

长期优化方向 ​

  1. 🚀 实现 SSR/SSG
  2. 🚀 完善监控体系
  3. 🚀 建立性能预算
  4. 🚀 自动化性能测试
  5. 🚀 持续优化迭代

📌 性能优化清单 ​

基础优化（必做） ​

  • [ ] 启用 HTTP/2
  • [ ] 开启资源压缩
  • [ ] 使用 CDN
  • [ ] 设置缓存策略
  • [ ] 图片优化

进阶优化（推荐） ​

  • [ ] 代码分割
  • [ ] 懒加载
  • [ ] 预加载关键资源
  • [ ] Tree Shaking
  • [ ] 骨架屏

高级优化（可选） ​

  • [ ] SSR/SSG
  • [ ] Service Worker
  • [ ] HTTP/3
  • [ ] 边缘计算
  • [ ] 性能监控平台

🎯 性能目标 ​

根据 Google 的建议，优秀的 Web 应用应该达到：

指标优秀需要改进差
LCP< 2.5s2.5-4s> 4s
FID< 100ms100-300ms> 300ms
CLS< 0.10.1-0.25> 0.25
FCP< 1.8s1.8-3s> 3s
TTI< 3.8s3.8-7.3s> 7.3s

🔗 相关文章 ​

即将更新更多性能优化实战文章...

💪 持续优化，永无止境

📈 性能优化是一个持续迭代的过程，需要不断学习和实践