如何进行前端性能优化？

一、先搞清楚优化什么（核心指标）

前端性能不是感觉，而是指标：

⭐ 核心 Web 指标（必须掌握）

• FCP（First Contentful Paint）：首次内容出现

• LCP（Largest Contentful Paint）：最大内容渲染（核心）

• TTI（Time To Interactive）：可交互时间

• CLS（Cumulative Layout Shift）：布局偏移

• INP（Interaction to Next Paint）：交互响应（新核心指标）

👉 你可以用：

• Chrome DevTools

• Lighthouse

• WebPageTest

---

二、优化从哪里入手（5大方向）

---

1️⃣ 资源加载优化（最直接见效）

✔ 减少资源体积

• Tree Shaking（ESM）

• 代码压缩（Terser）

• 图片压缩（WebP/AVIF）

✔ 按需加载（你项目里非常关键）

const Detail = React.lazy(() => import('./Detail'))

✔ CDN + 缓存

• 静态资源上 CDN

• 强缓存（Cache-Control）

• 协商缓存（ETag）

---

2️⃣ 渲染性能优化（React重点）

✔ 避免不必要渲染

export default React.memo(Component)

const memoValue = useMemo(() => compute(data), [data])

✔ key 使用正确

• 避免 index 作为 key（列表变化会炸）

✔ 大列表优化

👉 必会：虚拟列表

• react-window

• react-virtualized

---

3️⃣ 网络优化（很多人忽略）

✔ 减少请求数量

• 合并接口（BFF）

• GraphQL（按需取数据）

✔ 提前加载

<link rel="preload" href="/main.js">
<link rel="prefetch" href="/next-page.js">

✔ HTTP2 / HTTP3

• 多路复用

• 头部压缩

---

4️⃣ 构建优化（工程化核心）

你现在做 React 项目，这块提升很大：

✔ 打包拆分

splitChunks: {
  chunks: 'all'
}

✔ 分包策略

• vendor（第三方库）

• common（公共模块）

• 页面级拆分

✔ 构建工具升级

• Webpack → Vite（明显提升开发体验）

👉 推荐：

• Vite

---

5️⃣ 运行时优化（高级）

✔ Web Worker

把计算丢到子线程

const worker = new Worker('worker.js')

✔ 防抖节流

lodash.debounce(fn, 300)

👉 用：

• Lodash

---

✔ 避免重排重绘

❌ 不要频繁：

div.style.width = '100px'

✔ 批量操作：

requestAnimationFrame(() => {})

---

三、你这个背景的"进阶优化点"（重点）

你做过性能平台，这些可以拉开差距：

---

🚀 1. 性能监控体系（核心竞争力）

自己实现一套：

performance.getEntriesByType('navigation')

监控：

• FCP / LCP

• 接口耗时

• JS 错误

👉 上报到服务端 → 做可视化（你可以用 ECharts）

---

🚀 2. 首屏优化（最关键）

• SSR（Next.js）

• 骨架屏

• 关键 CSS 内联

---

🚀 3. 大屏/图表优化（你用过 ECharts）

👉 重点：

• 数据分片加载

• 节流 resize

• 关闭动画（大数据量）

---

四、总结一张图（思维模型）

性能优化 = 加载快 + 渲染快 + 请求少 + 体积小 + 不卡顿

---

五、给你一个实战建议（非常关键）

你可以在你当前项目里做一个优化方案：

👉 性能优化 checklist：

• 首屏 JS < 200KB

• LCP < 2.5s

• 接口并发控制

• 表格使用虚拟滚动

• 图片全部 WebP

• 接入性能监控