Vue.js渲染性能测试需聚焦四类真实场景：首屏加载测FCP/LCP，列表滚动测FPS与DOM增长，高频更新测render耗时与帧率波动，组件切换测卸载挂载全流程及内存释放；只采集FCP/LCP、FPS稳定性、内存增量三个硬指标；对照组须硬件、数据、构建、网络全锁死；根因分析需结合Chrome Performance与Vue DevTools定位具体耗时环节。
Vue.js 渲染机制的性能基准测试，关键不在跑个 benchmark，而在把“谁慢、为什么慢、改了有没有真变快”说清楚。它需要紧扣真实渲染链路，用可复现、可归因的数据替代主观感受。
聚焦四类典型渲染场景
不同交互触发的渲染压力差异巨大，测试必须对应实际使用路径：
- 首屏加载：从路由跳转开始，测 FCP（首次内容绘制）到 LCP（最大内容绘制）时间，重点关注 setup 执行、虚拟 DOM 创建、首次 patch 的耗时
- 列表滚动：用 1000 / 5000 / 10000 条纯净模拟数据，持续滚动 5 秒，观察 FPS 是否稳定 ≥55，同时检查 DOM 节点数是否随滚动持续增长
- 高频更新：每 100ms 触发一次 reactive 数据变更（如 items.push()），连续 3 秒，记录平均 render 耗时与帧率波动范围
- 组件切换：Tab 切换或模态框显隐时，测量 onBeforeUnmount → onMounted 全流程耗时，并对比前后内存快照，确认实例是否释放
只盯三个硬性指标
不堆砌数字，只采集对用户体验有直接感知的量化结果：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- FCP/LCP：用 Navigation Timing API 或 Lighthouse 获取，冷启动、空缓存下运行，排除 CDN 和预加载干扰
- FPS 稳定性：Performance 面板中开启“Frames”轨道，滚动或更新期间看绿色帧条是否连续、是否频繁跌破 55fps
- 内存增量：组件重复挂载/卸载 10 次后，用 Memory 面板拍 Heap Snapshot，重点比对 VueComponent 实例数和 detached DOM 节点是否回落
对照组设计必须可控
每次只动一个变量，其余环境全部锁死：
立即学习“前端免费学习笔记（深入）”；
- 硬件统一：M1 Mac 或 i7-10700K + 32GB 内存，Chrome Stable 最新版，隐身模式，禁用所有插件
- 数据一致：用
Array.from({length: N}, (_, i) => ({ id: i, text: `Item ${i}` }))生成无副作用的测试数组 - 构建固化：production 模式，关闭 source map，Vue 版本、构建工具版本严格一致
- 网络模拟：DevTools Network 设为 “Fast 3G”，带宽 1.6 Mbps，延迟 150 ms，避免本地缓存影响
用工具直击根因，而非泛泛而谈
单靠 Performance 面板看“Scripting”长条没用，要深入调用栈定位：
- 在 Chrome Performance 中勾选 “JavaScript samples” 和 “Event log”，筛选
run、queueJob、triggerEffects等 Vue 内部函数，看耗时是否集中在响应式触发或 patch 阶段 - 用 Vue DevTools Performance 标签，直接查看每个组件的 setup/render/patch 耗时，支持按依赖关系着色，一眼看出哪个子组件拖慢父组件
- Elements 面板里手动统计
.list > div数量——若达数千，基本可判定是 DOM 过载，不是响应式慢，也不是 JS 慢，而是该上虚拟滚动
