使用 performance api 进行性能分析的核心做法是调用 performance.getentriesbytype('measure') 获取标记数据，并结合 performance.mark() 和 performance.measure() 记录关键步骤的时间差。通过解析返回的 performancemeasure 对象数组，可以提取每个阶段的耗时（duration）和起始时间（starttime），从而定位代码中的性能瓶颈。
如何记录自定义代码段的执行时间
要记录特定代码块的执行时间，需要在代码执行前调用 performance.mark('start_key')，执行完毕后调用 performance.mark('end_key')，随后使用 performance.measure('measure_name', 'start_key', 'end_key') 生成测量结果。这样可以在浏览器性能面板中直观看到该段逻辑的耗时。
const startMark = 'data_process_start';
const endMark = 'data_process_end';
const measureName = 'data_processing_duration';
// 1. 创建开始标记
performance.mark(startMark);
// 模拟一段耗时代码
let sum = 0;
for (let i = 0; i 0) {
console.log(`耗时: ${measures[0].duration} ms`);
}
运行上述代码后，控制台将输出类似 “耗时: 5.23 ms” 的结果。该结果对应 PerformanceMeasure 对象的 duration 属性。注意，mark 只是打点，不产生开销，真正的计时由 measure 触发计算。
如何获取页面加载相关的预定义性能指标
除了自定义标记，Performance API 还提供了对导航、资源加载等预定义事件的访问。通过调用 performance.getEntriesByType('navigation') 或 performance.getEntriesByType('resource')，可以直接获取页面加载生命周期中各阶段的时间戳和耗时。这些数据对于分析网络请求速度和渲染准备时间非常有用。
// 获取导航性能数据
const navEntry = performance.getEntriesByType('navigation')[0];
if (navEntry) {
console.log('DNS 查询耗时:', navEntry.domainLookupEnd - navEntry.domainLookupStart);
console.log('TCP 连接耗时:', navEntry.connectEnd - navEntry.connectStart);
console.log('DOM 解析完成耗时:', navEntry.domContentLoadedEventEnd - navEntry.domContentLoadedEventStart);
}
// 获取所有资源加载条目
const resources = performance.getEntriesByType('resource');
resources.forEach(res => {
if (res.name.includes('.js')) {
console.log(`JS 文件 ${res.name} 加载耗时: ${res.duration} ms`);
}
});
执行上述代码会打印出导航各阶段的精确耗时以及所有 JavaScript 资源的加载时长。这些数据直接来源于浏览器的内部计时器，比手动打点更准确反映网络层和解析层的性能表现。
当多个测量项同名时如何处理冲突
如果在同一页面多次调用 performance.measure() 且使用相同的名称，新的测量项会覆盖旧的测量项，因为 getEntriesByName 返回的是最新创建的实例。若需保留历史数据，应确保每次调用使用唯一的名称，例如结合时间戳或计数器生成唯一 ID。此外，performance.clearMeasures() 可用于清理所有测量项，避免内存累积。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
