使用 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 <p>上述传统方式虽然简单，但无法与 <code>PerformanceObserver</code> 联动，也无法自动关联到具体的代码行或任务。相比之下，<code>mark</code> + <code>measure</code> 的组合能生成标准的性能条目，便于后续批量采集和分析。标记名称应具有语义化特征，如 <code>'api-fetch-start'</code> 而非 <code>'mark1'</code>，以便在调试面板中快速识别。</p><h2>如何获取并解析 <code>PerformanceMeasure</code> 数据</h2><p>测量创建后，数据存储在浏览器的性能缓冲区中。通过 <code>performance.getEntriesByName('measureName')</code> 可以获取包含该名称的所有测量条目。返回的是一个数组，每个元素都是 <code>PerformanceMeasure</code> 实例，包含 <code>name</code>、<code>startTime</code>、<code>duration</code>、<code>entryType</code> 等属性。其中 <code>duration</code> 字段直接给出了两次标记之间的毫秒数，这是最核心的指标。若需实时监控，可结合 <code>PerformanceObserver</code> 监听 <code>'measure'</code> 类型的事件，实现非阻塞的数据收集。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill12835" title="JavaScript 测试模式"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20cf0281539.jpg" alt="JavaScript 测试模式" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill12835" title="JavaScript 测试模式" class="overflowclass">JavaScript 测试模式</a>
<p class="overflowclass">使用 Jest、Vitest 和 Testing Library 实施全面的测试策略，包括单元测试、集成测试和端到端测试，涵盖模拟、测试夹具和测试驱动开发。在编</p>
</div>
<a rel="nofollow" href="/xiazai/skill12835" title="JavaScript 测试模式" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><p><img src="https://img.php.cn/upload/article/001/242/473/179463349583157.png?x-oss-process=image/resize,p_40" alt="JavaScript 运行时性能分析怎么使用 performance.measure"></p><pre class="brush:php;toolbar:false;">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() 或指定唯一的动态名称，如加入时间戳后缀。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
