vue组件压力测试需量化优化效果：设计首屏加载、列表滚动、数据更新三类场景，固化硬件/浏览器/构建/网络环境，设置a-d四组对照并取中位数，用performance.mark与puppeteer自动化采集指标。
Vue 组件渲染性能压力测试不是“多点几次看卡不卡”，而是用可控变量、可复现操作和可采集指标，把优化效果量化出来。关键在于设计出能暴露真实瓶颈的对比组，并确保每次测量环境一致。
明确三类核心压力场景
不同场景触发的性能问题完全不同，需分别建压测链路：
- 首屏高压加载：模拟路由跳转后组件挂载+远程数据请求+图表渲染全过程，测 FCP/LCP/TTI，重点关注 setup 执行耗时与 render 阻塞时间
- 列表高频滚动：1000–5000 条数据下持续滚动 5 秒，采集 FPS 曲线、主线程长任务（>50ms）、DOM 节点数及内存增量
- 数据高频更新：每 100ms 触发一次 reactive 数据变更（如 items = [...items.slice(1), newItem]），记录连续 3 秒内平均帧率与 setOption/setData 执行微秒级耗时
统一环境，排除干扰变量
硬件、构建、网络稍有差异，结果就不可比。必须固化：
- 硬件：固定设备（如 M1 Mac 或 i7-10700K + 32GB RAM），关闭后台程序与硬件加速以外的实验性功能
- 浏览器：Chrome Stable 最新版，无痕模式，禁用所有插件与扩展
- 构建：production 模式，source map 关闭，Vue/Vite 版本锁定，包体积（gzip 后）纳入基线记录
- 网络：DevTools Network 面板设为 “Fast 3G”（1.6 Mbps / 150ms 延迟），禁用缓存与预加载
设置可比性强的对照组
避免“改完好像快了”的模糊判断。以表格组件为例，四组对照应严格保持操作序列一致（挂载→插入100条→更新50条→删除20条→卸载）：
