使用 performance.measure 分析性能的核心做法是：在关键代码段前后分别调用 performance.mark() 标记起点和终点，随后通过 performance.measure(name, startmark, endmark) 创建测量记录。浏览器会自动计算两个标记之间的时间差并存储为 performancemeasure 对象，开发者可通过 performance.getentriesbyname() 获取这些数据进行详细分析。
performance.mark() 如何配合 measure 定义边界
要使用 performance.measure，必须先使用 performance.mark() 创建命名标记。该函数接受一个字符串作为名称，并在内部维护一个有序的时间戳列表。标记本身不执行任何逻辑，仅记录当前高精度时间。例如，在渲染组件前标记 'render-start'，渲染完成后标记 'render-end'，这两个标记就构成了测量的边界。如果没有预先定义的标记，measure 将抛出错误。
const start = performance.now();
// 模拟耗时操作
for (let i = 0; i < 1000000; i++) { Math.sqrt(i); }
const end = performance.now();
console.log(end - start);上述传统方式虽然简单，但无法与 PerformanceObserver 联动，也无法自动关联到具体的代码行或任务。相比之下，mark + measure 的组合能生成标准的性能条目，便于后续批量采集和分析。标记名称应具有语义化特征，如 'api-fetch-start' 而非 'mark1'，以便在调试面板中快速识别。
立即学习“Java免费学习笔记（深入）”；
如何获取并解析 PerformanceMeasure 数据
测量创建后，数据存储在浏览器的性能缓冲区中。通过 performance.getEntriesByName('measureName') 可以获取包含该名称的所有测量条目。返回的是一个数组，每个元素都是 PerformanceMeasure 实例，包含 name、startTime、duration、entryType 等属性。其中 duration 字段直接给出了两次标记之间的毫秒数，这是最核心的指标。若需实时监控，可结合 PerformanceObserver 监听 'measure' 类型的事件，实现非阻塞的数据收集。
performance.mark('start');
setTimeout(() => {
performance.mark('end');
performance.measure('timeout-test', 'start', 'end');
const entries = performance.getEntriesByName('timeout-test');
console.log(entries[0].duration);
}, 100);在实际项目中，建议在应用初始化阶段设置一个全局的 PerformanceObserver，捕获所有 'measure' 类型的条目。这样即使忘记手动打印日志，也能在后台持续积累性能数据。需要注意的是，性能缓冲区有大小限制（通常为150个条目），旧数据会被自动丢弃，因此关键测量应及时处理或导出。
当 performance.measure 遇到重复名称时如何处理
如果在不同时间点多次调用 performance.measure 并使用相同的名称，浏览器不会覆盖之前的记录，而是追加新的 PerformanceMeasure 条目。这意味着 getEntriesByName 返回的数组长度会大于1。这种设计允许开发者统计多次运行的平均值或最大值。例如，在一次页面加载过程中对同一个 API 请求进行多次测量，可以通过遍历数组计算平均耗时。若希望每次只保留最新结果，需在调用 measure 前使用 performance.clearMeasures() 或指定唯一的动态名称，如加入时间戳后缀。
