前端性能优化实战：一个后台系统的真实优化清单

我在后台系统里做过的 8 个真实性能优化

性能优化不是玄学，是能一条条打勾的活。这篇讲的是我在一个 Vue3 + Ant Design 后台系统里真动过手的东西，代码都是从项目里抠的，不是网上抄的模板。

先搞清楚优化谁

Core Web Vitals 四个指标大家都熟，但我做后台系统的体感是：INP 比 LCP 重要。C 端官网拼首屏，后台是用户天天用的工具，他们最痛的是"点一下卡半天"和"表格滚着掉帧"。所以这篇主要讲交互和渲染，不讲首屏加载。

加载：少塞点东西

图片 WebP + lazy、路由懒加载、CDN 是标配，不展开。讲一个容易踩的坑：后台"管控对象多选"这个功能，用户是真能给你选几百个标签。全选塞进请求，接口慢，表单渲染几百个 tag 直接卡。我在 change 里截断：

const handleControlMapChange = values => {
  if (values?.length > 200) {
    formState.value.control_map = values.slice(0, 200);
    return message.error('已达200个标签选择上限');
  }
};

"前端先限流"这招很土，但特别有效，比啥算法优化都实在。

渲染：别让浏览器反复干活

高频事件用 throttle。 引导组件要跟着元素定位，resize 疯狂重算位置，加了 throttle 就好很多，配 MutationObserver 监听 DOM 变化。这里用 throttle 不用 debounce，因为要"持续跟手"。

动画走合成层。 抽屉展开动画一开始直接改 height，掉帧明显。改成 willChange 提示浏览器"这个要动画了" + requestAnimationFrame 下一帧写终点。但记得在 transitionend 里把 willChange 清掉——我忘过，显存一直占着，页面越用越卡。

滚到才处理。 工单消息列表，每条进去就标已读，进页面全标，滚动一下发几十个请求。改成 IntersectionObserver，滚到哪条标哪条。注意 onBeforeUnmount 里 disconnect() 别漏，否则页面切走了回调还在跑，内存泄漏。

运行时：别让请求打架

批量请求。 消息已读用 IntersectionObserver 后滚动快还是请求多。干脆收集起来，3 秒防抖合并提交一次接口：

const list: string[] = [];
const executeRequest = debounce(() => {
  if (!list.length) return;
  postReadWorkOrderReply({ id: list.join(',') }).then(() => { list.length = 0; });
}, 3000);

性能优化的终极形态不是让单个请求变快，是让请求变少。这个要后端配合支持批量参数，但收益是网络往返 N 次变 1 次。

loading 防重复提交。 用户手滑连点两次，接口打两遍还可能重复写库。一个 loading 标志挡一下就行。

Vue 响应式别过度。 大对象只读不写时用 shallowRef 只包一层，别让 Vue 把深层全代理了，白花性能。

页面缓存。 报表页标签切来切去每次都重拉接口，包一层 keep-alive 切回去就不请求了。但数据实时性高的页面别用，会显示旧数据。

最值钱的是这几个坑

1. willChange 用了忘清，显存一直占着，页面越用越卡。
2. Observer / 事件监听没在卸载时清理，页面切走回调还在跑，一堆僵尸请求。
3. 想优化之前先量化。我一开始凭感觉瞎调，后来开 Performance 面板看火焰图，确认是渲染慢还是请求慢再动手，效率完全不一样。

优化没有银弹，一次改一处，改完量一下前后对比。后台系统的性能优化不炫技，就是让每天坐你旁边的同事少等那几百毫秒。

---

原文链接：https://blog.fateguy.com/posts/frontend-perf