前端性能优化有哪些手段？

详细解析#

先测量，再定位#

• 实验室工具：Lighthouse 给出整体评分和改进建议；DevTools 的 Performance 面板看主线程上的长任务，Network 面板看请求瀑布和资源体积
• 真实用户数据：关注 Core Web Vitals，通过前端监控采集线上数据
• 先判断瓶颈在哪：是网络慢、资源太大，还是主线程被占满，再对症下药

网络加载：让资源更快到达#

• 缓存：带 hash 的静态资源长期强缓存，HTML 走协商缓存（见 HTTP 缓存）
• CDN：静态资源从离用户近的节点返回（见 CDN 的原理）
• HTTP/2 和 HTTP/3：多路复用，减少连接开销和队头阻塞（见 HTTP 各版本的区别）
• 压缩：文本资源开启 gzip 或 Brotli
• 资源提示：用 preconnect、preload、prefetch 提前建立连接、加载资源（见资源提示）
• 减少关键请求的数量和体积：减少重定向，首屏用不到的资源延后加载

资源体积：让资源更小#

• 代码分割与路由懒加载：用动态 import() 拆分代码，访问到某个页面时才加载对应的代码
• tree-shaking：基于 ES Module 的静态结构，移除没有用到的代码
• 组件库按需引入：只打包用到的组件和样式
• 图片优化：使用 WebP / AVIF，用 srcset 提供响应式图片，非首屏图片懒加载（见图片懒加载）
• 字体子集化：中文字体动辄几 MB，只保留页面用到的字符

渲染：让页面更早显示#

• 关键 CSS 内联：首屏需要的样式直接写进 HTML，其余 CSS 异步加载；非关键 JS 加 defer，不阻塞 HTML 解析
• 减少回流和重绘：批量修改 DOM，动画用 transform（见回流和重绘）
• 长列表虚拟滚动：只渲染可视区域内的元素（见长列表渲染）
• SSR / SSG：服务端直接返回带内容的 HTML，改善首屏（见 SSR 和水合）

运行时：让交互更流畅#

• 拆分长任务：超过 50 毫秒的任务要拆开，及时让出主线程
• 防抖节流：控制 scroll、input 等高频事件的处理频率（见防抖和节流）
• Web Worker：把繁重计算移出主线程（见 Web Worker）
• 避免内存泄漏：及时清理定时器、事件监听和全局引用（见内存泄漏）

框架层面的优化，比如组件懒加载、减少不必要的更新，见 Vue 项目的性能优化。

串起来看#

面试官可能追问#

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  // 构建后生成 stats.html，并自动在浏览器中打开
  plugins: [vue(), visualizer({ open: true })],
})

易错点#

• 不要一上来就罗列手段，先讲怎么测量、怎么定位瓶颈
• 优化有代价：代码块拆得太碎会增加请求数，preload 用多了会抢占关键资源的带宽，都要以数据为准
• 首屏的 LCP 图片不能懒加载，否则 LCP 会变差