前端性能优化

前端性能优化

• 结合性能指标一般从网络层面、资源加载、渲染层、构建、监控进行优化

1. 性能优化

• 减少HTTP请求
  • 合并CSS/JS、雪碧图、接口合理合并、减少第三方资源
• 使用CDN资源
  • 静态资源(CSS/JS/图片/字体)就近访问
• 资源缓存
  • 强缓存：Cache-control、 Expires
• 压缩资源
  • Gzip/Brotli压缩文本资源
  • 压缩HTML/CSS/JS(webpack构建压缩)
• 启用HTTP/2、HTTP/3
  • 多路复用、头部压缩，提升并发加载速度

2. 资源加载

• 懒加载
  • 图片懒加载、路由懒加载、组件懒加载
• 预加载/预连接
  • <link rel="preload": 关键资源提前加载(如字体、首屏图片)
  • <link rel="prefetch": 空闲时加载下一页可能用到的资源
  • <link rel="preconnect": 提前与第三方域名构建连接
• 关键CSS内联
  • 首屏样式直接下载，避免阻塞资源
• 异步加载非关键JS
  • async/defer避免阻塞HTML解析
• 图片&媒体优化
  • 使用现代图片格式：webp/avif
  • 图片压缩、适当尺寸
  • 响应式图片元素或srcset属性
  • 视频使用muted autoplay、封面图代替首帧

3. 渲染&运行是优化

• 减少重排重绘(reflow/repaint)
  • 批量修改DOOM
  • 使用transform、opacity做动画 避免频繁读取布局属性(offsetWidth等)
• 防抖节流
  • scroll、resize、input高频事件使用
• 虚拟列表/虚拟滚动
  • 长列表只渲染可视区域，解决大量DOM卡顿
• 避免内存泄露
  • 定时器、事件监听、全局变量、闭包及时清理
• 长任务拆分
  • 将超过50ms的JS长任务拆分为多个微任务，使用setTimeout或scheduler.pstTask，避免阻塞主线程
• WebWorker
  • 将复杂的数据计算、加密、文件处理放到Worker线程，避免阻塞UI渲染

4. 构建优化(webpack/Vite)

• 代码分割Code Spliting
• Tree Shaking 剔除无用代码
• 第三方库按需引入、替换轻量库
• 开启持久化缓存、多线程构建
• 分析打包体积、拆包、剔除冗余

5. 首屏&用户体验

• SSR/同构渲染(Next.js、Nuxt.js)
• SSG静态站点生产
• 骨架屏、Loading状态提升感知速度

性能优化常用工具

1. 浏览器自带

• Lighthouse：综合评分(性能、可访问性、SEO)
  • 最常用的开源自动化工具，生成性能、可访问性、SEO等评分，并给出改进建议
• Performance: 分析运行时性能、长任务、FPS
• Network: 看加载瀑布、缓存、压缩
• Coverage：查看无用CSS/JS
• Memory：内存快照，排查泄露

2. 构建分析

• Webpack Bundle Analyzer: 打包体积分析
• Vite Bundle Visualizer
• Source Map Explorer

3. 监控&线上分析

• Web Vitals(Core Web Vitals)LCP、FID/INP、CLS核心指标
• Sentry：错误监控+性能
• Fundebug/阿里云ARMS/听云