哗啦啦的小流弊我们先从一个项目里真实踩过的坑说起。之前接了一个后台管理系统，业务不算复杂，就是表格多、筛选条件多、报表导出多。技术栈是 Vue 2 + Element UI 那套老组合，刚开始一切正常，等数据量一上来，问题就全冒出来了：输入框敲一个字卡一下，表格切换页码要转圈两三秒，打开 DevTools 的 Performance 面板录了一段操作，满屏都是红条。
这种问题绝大多数人第一反应是“换框架”“上服务端渲染”“加硬件”，但实际去压测一看，瓶颈根本不在框架，而是 JavaScript 本身的执行效率太差。这次我打算用一套完整的实战案例，把“性能调优”这件事掰开了讲清楚：怎么定位瓶颈、怎么优化大数据渲染、怎么减少无意义的计算、怎么卡住网络请求的喉咙，最后再聊几个日常开发里最容易忽略的坑。主要内容都是我在真实项目中验证过、能直接抄作业的方案，适合那些已经被“页面卡顿”“请求慢”“内存一直涨”折磨过，但还没系统梳理过排查思路的前端开发者。
1. 性能问题到底出在哪：先量化，再动手
很多人在性能优化上有个误区，一上来就各种骚操作：代码分割、路由懒加载、图片压缩、CDN 加速……全都做了，结果打开页面还是卡。为什么？因为根本没搞清楚瓶颈在哪，全部是盲打。
1.1 用 Performance 面板给页面“拍个片”
Chrome DevTools 的 Performance 面板（也就是以前的 Timeline）是我排查性能问题的第一站。它能把页面加载到交互的整个过程录制下来，然后以时间轴的方式展示：哪些阶段耗时长、哪些函数占了大量执行时间、有没有长时间占用主线程导致页面“假死”。
操作方式不复杂：打开页面，按 F12 进入 DevTools，切到 Performance 面板，点击录制按钮，然后在页面上操作你想要优化的那个流程（比如切换表格页码、输入关键词筛选），操作完点击停止。面板底部会自动生成一份详细报告，重点看两块：
- CPU 占用率：如果长时间处在 90% 以上，说明计算逻辑一定有问题，需要往下钻具体是哪个函数。
- 长任务（Long Task）：浏览器主线程执行超过 50ms 的连续任务。页面交互卡顿的元凶基本都这些长任务里。
之前那个项目，我一录制就发现问题了：一个看似普通的表格刷新操作，主线程上挂了一个接近 1.2 秒的长任务，火焰图一展开，好家伙，密密麻麻全是 render 相关的函数调用，再往下看有一个叫 formatDateRange 的函数被反复调了十几万次。
1.2 性能数据的解读：火焰图告诉我们什么
火焰图是 Performance 面板里最有价值的部分，但很多新手看不懂。我简单说一下阅读方法：横轴是执行时间，纵轴是调用栈的层级。某个色块越宽，说明这个函数累计执行时间越长。如果你发现某个函数色块很宽，并且它的下级调用栈里没有任何“网络请求”“DOM 操作”之类的等待事件，那基本可以断定：问题就是 JavaScript 本身算得太慢。
在上面提到的 formatDateRange 案例里，这个函数本身很简单，就是 new Date().getFullYear() 之类取一些时间字段拼接成字符串。之所以被执行了十几万次，是因为它在一个 computed 属性里被调用，而那个 computed 属性依赖了一个会频繁变化的响应式数据。数据一变，依赖它的所有地方全部重新计算。这就是典型的“看不见的暴力计算”——不是代码写错了，是代码的调用规模失控了。
所以，拿到优化任务的第一件事不是写代码，而是量化。记下优化前的指标：白屏时间、可交互时间、某个操作的耗时、内存占用趋势。优化后同口径再测一次。没有这两组数据，你后面的所有优化都是“拍脑袋”，既无法证明效果，也无法说服团队。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 数据渲染瓶颈：大数据量表格的极致优化之路
表格是后台系统的重灾区。几千行数据一次性渲染进 DOM，哪怕每一步操作都很克制，最终导致的布局计算、样式重绘、事件绑定数量也会压垮主线程。业界有几套比较成熟的优化思路，我全部在项目里试过，这里说说哪种方案在什么场景下最管用。
2.1 最简单的取舍：分页还是全量渲染？
如果你的业务场景允许分页，最好选择分页，这是成本最低的优化。但很多时候产品经理拿着高保真图过来说：“我们要像 Excel 一样能滚动，不要有分页。”这就是虚拟列表的活。
虚拟列表的核心思想特别朴素：视口（viewport）高度固定，里面只能看见十几个 DOM 节点，那我管你有没有十万条数据，DOM 里只挂需要显示的那些行，再加上上下两个“占位区块”，让滚动条的高度看起来跟全部数据匹配。
网上有成熟的第三方库，比如 vue-virtual-scroller、react-window，但在实际业务里，我很少直接用它们，因为需求总是会跑偏：要跨行合并单元格、行头固定、每个单元格内容高度不固定……这些复杂场景下库的定制成本很高。所以很多时候还得是自己手写一个简洁版虚拟列表。
2.2 手写一个固定行高虚拟列表的完整思路
假设你是 Vue 项目，表格的每一行高度固定为 40px。容器高度为 400px