1. Performance API 的用处

Performance API
是浏览器中内置的一组工具，用于测量和记录页面加载和执行过程中的各类性能指标。它的主要用处包括：

  • 监控页面资源加载
    ：跟踪页面中的资源（如 CSS、JavaScript、图片）的加载时间。
  • 分析页面加载时间
    ：从导航到页面完全渲染的所有时间点。
  • 衡量用户交互性能
    ：测量用户点击、输入等操作的响应时间。
  • 优化性能瓶颈
    ：通过标记特定的代码片段和事件，精准定位性能瓶颈。

这些数据帮助开发者更好地理解页面表现，进而对性能进行优化和改进。

2. Performance API 常用的 API

在使用 Performance API 时，以下几个 API 是开发者最常用的工具：
getEntries()
、
mark()
、以及
PerformanceObserver
。这些 API 提供了从获取性能数据到观察性能事件的全面能力。

2.1 performance.getEntries()

performance.getEntries()
是 Performance API 提供的一个方法，它返回所有的性能条目（entries）。这些条目记录了从页面加载到当前时刻，各类资源的加载和交互的性能数据。性能条目包括页面加载资源（如 CSS、JS、图片等）以及自定义的事件标记。

//获取页面中所有资源的性能条目
const entries =performance.getEntries();

console.log(entries);

通过
getEntries()
，你可以获取资源加载时间、开始时间、结束时间等详细信息。这对于了解页面中每个资源的加载耗时十分有帮助。

2.2 entries 的类型

getEntries()
返回的每个性能条目对象都属于以下几种类型，开发者可以根据需要筛选和分析不同类型的数据：

  • navigation
    ：与页面导航相关的条目，通常用于分析页面加载的时间点。
  • resource
    ：所有通过网络请求加载的资源条目，包括 JS、CSS、图片等。
  • mark
    ：开发者自定义的标记，用于记录特定事件的开始或结束。
  • measure
    ：通过
    performance.measure()
    生成的条目，用于测量两个标记之间的时间间隔。

例如，使用
performance.getEntriesByType('resource')
可以只获取资源加载的性能数据：

//获取所有资源加载的性能条目
const resourceEntries = performance.getEntriesByType('resource');

console.log(resourceEntries);

通过这种方式，开发者可以轻松获取页面资源的加载时间及其详情。

2.3 performance.mark()

performance.mark()
是 Performance API 提供的一个方法，允许开发者在代码中手动创建标记。这些标记可以用于记录特定事件的发生时间，从而在分析性能时，更加精确地掌握代码中某个关键操作的时机。

//创建自定义标记
performance.mark('start-task');//执行某个任务
doSomething();//创建结束标记
performance.mark('end-task');//测量开始和结束之间的时间
performance.measure('Task Duration', 'start-task', 'end-task');

mark()
非常适合用于衡量应用程序中某段代码的执行时间，与
measure()
一起使用可以提供更加详细的性能分析。

2.4 PerformanceObserver

PerformanceObserver
是 Performance API 的一个高级特性，它可以监听性能事件的发生，并在事件触发时执行回调。这种观察模式可以帮助开发者实时监控页面中的资源加载、导航和其他性能相关的事件。

//创建 PerformanceObserver 实例，监听资源加载的事件
const observer = new PerformanceObserver((list) =>{const entries =list.getEntries();

  entries.forEach(entry=>{

    console.log(`${entry.name}: ${entry.duration}ms`);

  });

});//监听资源类型的性能条目
observer.observe({ entryTypes: ['resource'] });

通过
PerformanceObserver
，你可以监听特定类型的性能条目，如
resource
或
mark
，并实时分析其数据。对于监控资源加载、关键操作或用户交互时的性能表现非常有用。

总结

Performance API 是前端开发者进行性能监控的强大工具，它提供了对页面加载、资源加载以及用户交互的详细分析能力。常用的 API，如
getEntries()
、
mark()
、以及
PerformanceObserver
，可以帮助开发者实时获取和分析性能数据。

通过合理地使用 Performance API，你可以更好地了解页面中各类操作的性能表现，从而有效地优化 Web 应用的加载速度和用户体验。

标签: none

添加新评论