前端性能优化实战指南（从加载到渲染）

• 一、先谈指标：没有指标就没有优化
• 二、网络加载层：减少请求与体积
  • 1. 资源压缩与按需加载
  • 2. 图片优化（占比最大的优化点）
  • 3. 关键 CSS 内联
• 三、解析渲染层：减少主线程压力
• 四、运行时层：Vue 应用的优化
• 五、构建层：Vite 生产优化
• 六、性能优化面试答题框架

面试官问”你做过哪些性能优化”时，最怕听到笼统的回答。本文给你一套体系化的性能优化方法论，从指标、手段到落地，讲清楚”为什么这样做、能提升什么”。

一、先谈指标：没有指标就没有优化

性能优化必须先量化，用指标说话。核心指标（Web Vitals）：

面试加分点：能说出”我用 Lighthouse / Performance 面板定位到 LCP 瓶颈，从 X 优化到 Y”，比罗列十个名词强一百倍。

二、网络加载层：减少请求与体积

1. 资源压缩与按需加载

• 代码分割：路由级懒加载，import() 动态导入，让首屏只加载必要的 chunk；
• gzip / brotli：Nginx 开启 gzip on，文本类资源可压缩 60%-80%；
• HTTP/2 + 多路复用：减少连接开销（配合我之前写的 Nginx 配置文章）；
• HTTP 缓存：Cache-Control + ETag，静态资源用 immutable 长缓存。

2. 图片优化（占比最大的优化点）

<!-- 现代格式 + 响应式 + 懒加载 -->
<img
  src="photo.avif"
  srcset="photo-400w.avif 400w, photo-800w.avif 800w"
  sizes="(max-width: 600px) 400px, 800px"
  loading="lazy"
  alt="示例"
/>

• 用 AVIF/WebP 替代 JPG/PNG，同画质体积小 30%-50%；
• 配 srcset 按设备分辨率加载对应尺寸；
• 首屏以下图片 loading="lazy"；
• 长图用”渐进式加载 + 模糊占位”。

3. 关键 CSS 内联

首屏关键 CSS 内联到 HTML，非关键 CSS 异步加载，避免 CSS 阻塞渲染（CSS 是渲染阻塞资源）。

三、解析渲染层：减少主线程压力

• 减少 DOM 层级：嵌套过深会影响布局与样式计算；
• 避免强制同步布局（Layout Thrashing）：不要在循环里交替读 offsetHeight 和写样式，应先批量读、后批量写，或用 requestAnimationFrame 合并；
• CSS 动画优先用 transform/opacity：它们走合成器（compositor），不触发重排重绘，配合 will-change；
• 长任务拆分：超过 50ms 的 JS 任务会阻塞渲染，用 requestIdleCallback 或 Web Worker 处理耗时计算。

// 强制同步布局反例
for (let i = 0; i < list.length; i++) {
  const h = item.offsetHeight   // 读
  item.style.height = h + 'px'  // 写 → 强制重排
}

// 正确：先收集再统一写
const heights = list.map((el) => el.offsetHeight)
list.forEach((el, i) => (el.style.height = heights[i] + 'px'))

四、运行时层：Vue 应用的优化

结合 Vue 项目落地：

• 列表虚拟化：长列表（上千条）用 v-virtual-scroll 只渲染可视区，避免渲染上千个 DOM 节点；
• v-show vs v-if：频繁切换用 v-show，条件几乎不变用 v-if；
• computed 缓存 vs methods：重复计算的派生值用 computed；
• 组件拆分与 defineAsyncComponent：大组件按需异步加载；
• Object.freeze：对不需要响应式的静态大数组用 freeze 跳过 Proxy 代理；
• shallowRef / shallowReactive：深层对象不需要深层响应式时用浅层版本省性能。

五、构建层：Vite 生产优化

// vite.config.ts 关键优化项
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 手动分包，合理利用浏览器缓存（第三方库版本变化少）
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia'],
          vendor: ['axios', 'lodash-es'],
        },
      },
    },
    chunkSizeWarningLimit: 600,
    sourcemap: false,     // 生产去掉 sourcemap
  },
})

• Tree-Shaking：只用 lodash-es / es-toolkit 等 ESM 版本，按需引入；
• CDN 加速：静态资源走 CDN，配合我之前写的内网穿透、Nginx 文章搭建；

六、性能优化面试答题框架

当被问”如何做性能优化”，用这个结构回答：

1. 先定指标：用 Lighthouse / Web Vitals 量化当前水平，明确瓶颈（LCP/FCP/TBT）；
2. 按层排查：网络层（体积/请求/缓存/图片）→ 渲染层（重排重绘/主线程）→ 运行时（框架层面）；
3. 逐项优化并复测：每个优化都验证指标变化，形成数据闭环；
4. 沉淀为规范：把优化手段固化为团队规范（图片规范、代码分割规范、CI 体积检查）。

一句话记住本质：性能优化的核心是减少主线程的同步工作、减少网络传输量、提高缓存命中率。

性能优化不是”炫技”，而是工程素养的体现——能定位瓶颈、能量化收益、能形成规范，这才是面试官真正想看到的。