🚀 一、网络层面（最立竿见影）
✔ 1. 减小 bundle 大小
常见优化手段：
-
代码分割（code splitting）：路由级、组件级懒加载。
-
Tree Shaking：确保使用 ES Module，引入 antd 时用按需加载。
-
去掉不必要 polyfill ：babel/preset-env 的
useBuiltIns: 'usage'。 -
图片资源压缩：使用 webp、压缩工具（tinypng、svgo）。
-
第三方库替换：moment → dayjs；lodash → lodash-es 或按需加载。
👉 最大收益点：减少下载体积 = 首屏速度提升非常明显。
🚀 二、渲染层面（React / Vue）
✔ 2. 减少不必要的重新渲染
React 常见方式
-
React.memo -
useMemo与useCallback（避免子组件因引用变化重渲染） -
避免在 render 中创建函数、对象、数组
-
避免重复 setState（合并更新）
-
避免在 context 中存放大对象，拆 context
Vue 常见方式
-
v-once、computed、watch合理使用 -
避免深层响应式对象反复变动
-
key 不要乱用 index 导致 diff 多做工作
🚀 三、DOM 与布局层面（浏览器渲染机制）
✔ 3. 避免频繁触发回流（Reflow）
属于性能杀手：
以下操作会触发回流/重绘：
-
获取
offsetTop / offsetHeight / scrollTop（会强制布局） -
操作 DOM 频繁变动样式
-
改变元素几何属性（宽、高、margin、padding）
优化方案：
-
批量修改 DOM（使用
classList.add/remove一次修改） -
使用
requestAnimationFrame代替高频事件更新 -
使用虚拟列表（大数据渲染必备）
🚀 四、图片与资源优化
✔ 4. 图片优化是前端性能的大头
-
使用 webp、avif
-
小图标合并雪碧图 或用 SVG
-
图片懒加载（
loading="lazy"） -
服务端给图片做压缩（实际收益远大于前端）
🚀 五、缓存与存储
✔ 5. 缓存资源（浏览器缓存 + 本地存储）
-
HTTP 缓存（Cache-Control, ETag）
-
Service Worker 静态资源缓存（PWA）
-
localStorage/sessionStorage 预存一些不常变的数据
效果：减少重复请求，提高加载速度。
🚀 六、骨架屏与懒加载（提升感知速度）
✔ 6. 骨架屏 + 分块加载
即便首屏还没加载完，也让用户感觉快：
-
骨架屏占位
-
组件懒加载
-
滚动加载（infinite scroll）
-
图片懒加载
用户感知体验提升 > 实际性能。
🚀 七、大量数据与长列表优化
✔ 7. 虚拟列表（Virtualized List）
React：
-
react-window
-
react-virtualized
Vue：
- vue-virtual-scroller
上万条数据一下子从 秒级 → 毫秒级。
🚀 八、低端设备优化（动画、事件）
✔ 8. 动画优化
-
尽量使用 transform + opacity（不会触发布局）
-
避免频繁的 JS 动画（改用 CSS 动画）
-
用
requestAnimationFrame做平滑更新
👉 transform、opacity 是浏览器能 GPU 加速的属性。
🚀 九、弱网环境（你最近问过）
✔ 9. 弱网下的优化关键
-
请求失败自动重试（retry + backoff）
-
分片下载、边下载边渲染
-
合并请求减少 RTT
-
提前预加载关键资源（prefetch/preload）
-
超时控制（避免卡死）
🚀 十、构建工具层（Vite / Webpack）
✔ 10. 构建优化
Vite
-
使用 esbuild 进行压缩（更快）
-
lazy loading
-
按需构建目标浏览器
Webpack
-
分包（SplitChunks）
-
压缩 CSS / JS
-
preload/prefetch 插件
-
HardSourceCache
🚀 ⭐ 实际项目中收益最大的 TOP5 排行榜
按实际效果从高到低：
-
代码分割 + Tree Shaking（减少首屏 JS）
-
图片压缩 + webp
-
React.memo / useMemo / useCallback 降低渲染次数
-
虚拟列表（大数据场景）
-
HTTP/Browser 缓存
这些五项做了，一个项目能提升至少 30%--70% 的速度。