如何进行前端性能优化？

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

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

⭐ 核心 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
接入性能监控