npm 包 @webruntime/performance 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

@webruntime/performance 是一个基于 Web API Performance 的高级性能分析工具，能够帮助开发者快速识别和分析 Web 应用程序的性能瓶颈。

该 npm 包以模块化的方式提供性能追踪的核心功能，支持高度自定义的指标收集、性能监测、埋点分析、性能数据可视化等功能，帮助开发者深入探索应用的性能表现，追踪细化至函数甚至代码行级别，便于开发者更好地优化应用的性能。

安装

您可以通过 npm 安装 @webruntime/performance：

npm install @webruntime/performance --save

安装完成后，您可以通过如下方式引入：

const RuntimePerformance = require("@webruntime/performance");

使用

基础使用

创建 Performance 实例

const runtimePerformance = new RuntimePerformance();

开始记录性能数据

runtimePerformance.start();

在应用程序的关键位置调用标记方法

runtimePerformance.mark("My First Mark");
// ...code
runtimePerformance.mark("My Second Mark");

停止记录性能数据

runtimePerformance.stop();

获取性能数据

const performanceEntries = runtimePerformance.getEntries();

API

RuntimePerformance([config])

构造函数

参数：
- config [Object]：配置对象，可选属性：
  - sampling[Number]：采样率（取值范围 0-1，默认为 1，即全部捕获
  - includeTimingEntries[String[]]：需要包含的 Performance Timing 接口（具体字段名称见下）
  - excludeTimingEntries[String[]]：需要排除的 Performance Timing 接口（同上）
返回值：
- Performance 实例

const runtimePerformance = new RuntimePerformance({
  sampling: 0.5,
  includeTimingEntries: ["navigationStart", "loadEventEnd"],
  excludeTimingEntries: ["unloadEventStart"]
});

runtimePerformance.start()

开始记录性能数据

runtimePerformance.mark(name[, options])

在应用程序的关键位置调用标记方法

参数：
- name[String]：标记名称
- options [Object]：选项对象，可选属性：
  - detail[Object]：自定义标记数据
  - timeStamp[Number]：指定时间戳

runtimePerformance.mark("My First Mark", {
  detail: {
    desc: "Load Image"
  }
});

runtimePerformance.measure(name, startMark, endMark[, detail])

在两个标记之间测量时间间隔并记录数据

参数：
- name[String]：时间间隔名称
- startMark[String]：起始标记名称
- endMark[String]：结束标记名称
- detail[Object]：自定义数据

runtimePerformance.measure("Image Load Elapsed Time", "Image Start", "Image End", {
  desc: "Image Load Time"
});

runtimePerformance.clearMarks([name])

移除所有标记或指定标记

参数：
- name[String]：标记名称，可选，默认清除所有标记

runtimePerformance.clearMarks("My First Mark");

runtimePerformance.clearMeasures([name])

移除所有测量数据或指定数据

参数：
- name[String]：测量名称，可选，默认清除所有测量数据

runtimePerformance.clearMeasures("Image Load Elapsed Time");

runtimePerformance.stop()

停止记录性能数据

runtimePerformance.getEntries()

获取性能数据 (performance entry 数组)

runtimePerformance.getEntriesByType(type)

获取指定类型的性能数据

参数：
- type[String]：指定性能数据类型

const paintEntries = runtimePerformance.getEntriesByType("paint");

runtimePerformance.getEntriesByName(name, type)

获取指定名称和类型的性能数据

参数：
- name[String]：指定性能数据名称
- type[String]：指定性能数据类型

const imageLoadEntries = runtimePerformance.getEntriesByName("Image Load Elapsed Time", "measure");

runtimePerformance.toJSON()

获取性能数据的 JSON 字符串

数据类型

@webruntime/performance 支持的数据类型如下：

mark：标记
measure：测量
navigation：导航相关性能数据
resource：资源性能数据
paint：绘制性能数据

可以通过 performance entry 的 type 属性来区分不同的性能数据类型。

const entries = runtimePerformance.getEntries();
const navigationEntries = entries.filter(entry => entry.type === "navigation");
const resourceEntries = entries.filter(entry => entry.type === "resource");

总结

@webruntime/performance 可以帮助应用程序的性能优化，让开发者更加深入探索应用的性能表现，追踪更细化，进而优化应用的性能。

落实使用方式并理解 API，就可以更好地使用 @webruntime/performance 了。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5f2cd2ef3b0ab45f74a8bbab