vue 3 中可用 performance.mark/measure 对组件渲染路径轻量埋点，适用于 echarts 初始化等场景；需在 setup 或生命周期中打点、用 measure 关联并读取 duration；结合 nexttick 对齐 vue 更新时机；可交叉验证 chrome performance 面板。
在 Vue 3 中，直接用 performance.mark 和 performance.measure 可以对组件关键渲染路径做轻量、可控的耗时埋点，尤其适合验证某段逻辑（比如 ECharts 初始化、大数据表格渲染）的实际开销，不依赖 Devtools 开启状态，也适用于线上环境采样。
一、在 setup 或生命周期中打点定位具体环节
把标记放在你怀疑性能瓶颈的位置，例如：
- 在
onMounted中调用图表渲染前打mark('chart_start')，渲染完成后打mark('chart_end') - 在
watch响应式数据变化后、执行复杂计算前/后分别打点 - 对
v-for渲染大量项的循环体外加mark('list_render_start')，循环结束后加mark('list_render_end')
二、用 measure 汇总并读取结果
打完点后，用 performance.measure 关联起止标记，再通过 getEntriesByName 获取耗时数据：
performance.measure('chart_render', 'chart_start', 'chart_end')- 后续可通过
performance.getEntriesByName('chart_render')拿到包含duration（毫秒）的对象 - 建议配合
console.table或上报 SDK 输出，便于调试或监控
三、与 Vue 渲染周期对齐的实用技巧
单纯在 JS 同步代码中打点可能无法覆盖 Vue 的异步更新时机，需结合生命周期确保准确性：
- 想测“响应式更新 → 视图重绘”全程，可在
watch触发后立即打起点，在nextTick回调里打终点 - 要排除 layout/paint 耗时干扰、只看 JS 执行阶段，可把
measure放在nextTick内部，但避免跨帧操作 - 注意：不要在模板中写
{{ performance.mark(...) }}，会触发多次且不可控
四、配合 Chrome Performance 面板交叉验证
浏览器 Performance 面板能显示所有 mark 和 measure 条目（类型为 Mark 和 Measure），好处是：
- 可视化时间轴，直观看到打点位置与渲染帧、GC、Layout 等事件的关系
- 确认是否存在长任务阻塞了你的目标逻辑（比如某个
measure耗时 120ms，但火焰图显示它被一个 80ms 的第三方脚本打断） - 导出 JSON 后可用于自动化分析或构建时性能基线比对
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
