前端性能优化

清崖
60 阅读2分钟

核心方向

  1. 减少资源体积
    • 代码压缩
      • Terser压缩Js代码，CSSNano压缩CSS，html-minifier压缩HTML代码
      • webpack配置optmization.minimize = true
    • 图片优化
      • 格式选择：优先使用WebP，SVG用于图标
      • 工具自动化：imagemin插件 + responsive-loader生成响应式图片
    • tree Shaking
      • 配置ESM模块 + Webpack/Rollup，移除未使用代码
    • 按需引入
  2. 网络传输优化
    • CDN加速
      • 静态资源托管到CDN，利用边缘节点缓存
    • HTTP/2与QUIC
      • 启用多路复用和服务器推送，减少连接开销
    • 资源预加载
      • 关键资源预加载：
      <link rel="perload" href="main.css" as="style">
      • 预连接DNS：
      <link rel="perconnect" href="http://api.example.com">
    • 分块传输
      • 服务器分块传输HTML，优先输出 <head> 部分，加速首屏渲染
  3. 缓存策略
    • 强缓存和协商缓存
      • 设置Cache-Control: max-age=(有效时长时间戳)或expires用于哈希命名的静态资源
      • 使用ETag或Last-Modified实现协商缓存
    • Service Worker
      • 离线缓存策略：通过Workbox实现StaleWhileRevalidate 或 CacheFirst
      • 注册Service Worker并缓存核心资源
  4. 渲染优化
    • 关键渲染路径（CRP）优化
      • 内联关键CSS，异步加载非关键CSS
      • 延迟非首屏JS：<script defer> 或动态 import()
    • 减少重排和重绘
      • 使用transform和opacity触发GPU加速，避免频繁读写offsetHeight
      • 实例：批量修改DOM，使用虚拟DOM库
    • 异步更新策略
      • React的useDeferredValue 或 Vue的<Suspense>延迟低优先级渲染
  5. 代码执行效率
    • 防抖和节流
    • Web Worker
      • 将复杂计算（图像处理）移至Worker，避免阻塞主线程
      • 实例：
      const worker = new Worker('calc.js')
    • 内存管理
      • 避免全局变量泄漏，使用Chrome DevTools Memory面板分析内存快照

进阶优化技术

  1. 现代框架优化
    • React
      • 使用React.memo缓存组件，useMemo/useCallback避免重复计算
    • Vue
      • v-once静态节点优化，<KeepAlive>缓存动态组件
    • SSR/SSG
      • Next.js/Nust.js实现服务端渲染，静态生成（SSG）提速TTI（可交互事件）
  2. 性能监控与分析
    • 工具链
      • Lighthouse 生成优化报告，WebPageTest多地域测试
      • Chrome DevTools Performance面板分析帧率，长任务
    • 性能指标
      • 核心Web指标(Core Web Vitals)
        • LCP（最大内容绘制） < 2.5s
        • FID（首次输入延迟） < 100ms
        • CLS（累计布局偏移） < 0.1s
    • 真实用户监控（RUM）
      • 接入Sentry/New Relic 或 自建监控，采集FP/FCP/LCP等真实数据

实战案例

  • 首屏加载优化
    • SSR + 流式渲染：Next.js 输出 HTML 分块，逐步填充内容
    • 资源优先级：预加载字体，延迟加载非首屏图片（loading="lazy"）
    • 代码分割：基于路由动态加载组件
  • 长列表渲染
    • 虚拟滚动
      • 使用 react-window 或 vue-virtual-scroller，仅渲染可见区域
    • 分页加载
      • 滚动触底加载数据，显示骨架屏过渡

工具推荐

  • 构建工具
    • Webpack（配置splitChunk）/ Vite (利用ESBuild提速)
  • 性能分析
    • Chrome DevTools / Webpack Bundle Analyzer
  • 自动化
    • GitHub Actions + Lighthouse CI 集成性能门禁
avatar
文章
阅读
粉丝