最轻量兼容的运行时指标采集方式是用performance.mark()打关键节点、performance.measure()计算耗时、getEntriesByType('measure')提取上报；需语义化命名mark、避免重复、注意时序、过滤duration≤0项，并定期清理防内存堆积。
直接用 performance.mark() 打关键节点，再用 performance.measure() 算耗时，最后调 getEntriesByType('measure') 提取并上报——这是最轻量、兼容性好（Chrome 25+、Firefox 41+、Edge 12+、Safari 11+）、无需第三方库的运行时指标采集方式。
打语义化标记（mark）
在代码逻辑的关键位置插入带名字的时间戳，命名要清晰可读、避免重复：
-
performance.mark('route-enter')—— 路由跳转开始 -
performance.mark('api-fetch-start')—— 接口请求发起 -
performance.mark('render-complete')—— 视图渲染完成
注意：同名重复调用会抛 DOMException 错误；如需覆盖，先执行 performance.clearMarks('name')。
计算两段逻辑耗时（measure）
用两个 mark 名字生成一段测量记录，结果自动存入浏览器性能时间线：
performance.measure('route-to-render', 'route-enter', 'render-complete')performance.measure('api-latency', 'api-fetch-start', 'api-fetch-end')
必须确保 endMark 在 startMark 之后执行（异步场景中尤其注意时序，比如 fetch().then(() => performance.mark('end'))）。
提取并上报数据
measure 不自动发送，需主动获取、过滤、上报：
- 按类型批量取：
performance.getEntriesByType('measure') - 按名称精确取：
performance.getEntriesByName('route-to-render', 'measure') - 每条 entry 包含
name、startTime、duration（核心字段，单位毫秒） - 建议过滤掉
duration ≤ 0的异常项 - 用
fetch或new Image().src异步上报，避免阻塞主线程
示例：
<script>const entries = performance.getEntriesByName('api-latency', 'measure');
if (entries.length && entries[0].duration > 0) {
sendToMonitor({
metric: 'api-latency',
value: Math.round(entries[0].duration),
url: location.href
});
}
配套清理与长期运行保障
长时间驻留的页面（如后台管理系统）需防内存堆积：
- 定期清理：调用
performance.clearMeasures()和performance.clearMarks() - 可结合路由切换或定时器触发，例如每次页面级视图卸载前执行
- 不清理不影响测量功能，但大量未清除的 entry 可能拖慢
getEntries*查询性能
