performance.measure需先调用performance.mark打点才能计算时间差；它不记录时间，只取最近起止mark计算duration；必须手动用getentriesbyname读取结果，返回performancemeasure实例，duration字段为毫秒值。
performance.measure 的基本用法和前提条件
必须先调用 performance.mark 打点，performance.measure 才能工作；它本身不记录时间，只计算两个标记之间的时间差。
常见错误是直接调用 performance.measure('foo') 却没定义 'foo' 对应的起止 mark，结果返回 undefined 或测量项不可见。
- 起始 mark 必须在 measure 之前调用，结束 mark 必须在之后（或同时）
- mark 名称区分大小写，且不能含空格或非法字符
- 同一名称的 mark 可多次打点，
measure默认取最近一次起始 + 最近一次结束
如何正确创建可测量的时间段
典型场景：测一段异步操作耗时，比如 fetch 请求从发起前到响应处理完。
performance.mark('fetch-start');
fetch('/api/data')
.then(res => res.json())
.then(data => {
performance.mark('fetch-end');
performance.measure('fetch-duration', 'fetch-start', 'fetch-end');
});
注意：performance.mark 和 performance.measure 都是同步执行的，但 mark 的时间戳以调用时刻为准，不受后续 JS 阻塞影响。
- 如果想测宏任务之间的间隔（如 click 到 render），需确保 mark 在对应事件回调中调用
- 避免在同一个 tick 内重复使用相同 mark 名——会覆盖前一次时间戳
- Chrome DevTools 的 Performance 面板默认显示 measure 结果，但需勾选「User Timing」轨道
measure 结果在哪里查看和读取
测量结果不会自动打印，必须手动调用 performance.getEntriesByName 获取。
performance.measure('load-time', 'navigationStart', 'loadEventEnd');
const entries = performance.getEntriesByName('load-time');
console.log(entries[0].duration); // 输出毫秒数，如 1245.32
返回的是 PerformanceMeasure 实例，继承自 PerformanceEntry，关键字段是 duration（单位毫秒，保留三位小数）。
-
getEntriesByName返回数组，即使只测一次也要取[0] - 若名称不存在或未成功 measure，数组为空，直接访问
[0].duration会报Cannot read property 'duration' of undefined - 兼容性没问题：Chrome 25+、Firefox 41+、Edge 12+、Safari 11+ 均支持
容易被忽略的边界情况
最常踩的坑不是语法，而是时间参考系混乱。比如误以为 'navigationStart' 是页面 JS 开始执行的时间——其实它是上一导航的 unload 结束时刻，可能早于当前页面 script 加载。
- 不要混用不同上下文的 mark：Service Worker 中打的 mark，在主页面里 measure 不到
- SPA 路由切换时，若未手动清除旧 mark，
getEntriesByName可能返回历史残留项，建议用performance.clearMarks()或命名带时间戳前缀 -
measure不会触发 GC 或强制 layout，但频繁打点（>100 次/秒）可能轻微拖慢主线程，生产环境建议按需开关
真正难的不是调用函数，而是搞清你到底想测哪一段“用户感知的耗时”——是网络？JS 执行？还是渲染完成？mark 放错位置，measure 就失去意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
