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

npm 包 @webruntime/performance 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

简介

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

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

安装

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

--- ------- ----------------------- ------

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

----- ------------------ - -----------------------------------

使用

基础使用

创建 Performance 实例

----- ------------------ - --- ---------------------

开始记录性能数据

---------------------------

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

--------------------------- ----- -------
-- -------
--------------------------- ------ -------

停止记录性能数据

--------------------------

获取性能数据

----- ------------------ - --------------------------------

API

RuntimePerformance([config])

构造函数

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

----- ------------------ - --- --------------------
  --------- ----
  --------------------- ------------------- ----------------
  --------------------- --------------------
---

runtimePerformance.start()

开始记录性能数据

runtimePerformance.mark(name[, options])

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

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

--------------------------- ----- ------ -
  ------- -
    ----- ----- ------
  -
---

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

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

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

--------------------------------- ---- ------- ------ ------ ------- ------ ----- -
  ----- ------ ---- -----
---

runtimePerformance.clearMarks([name])

移除所有标记或指定标记

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

--------------------------------- ----- -------

runtimePerformance.clearMeasures([name])

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

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

--------------------------------------- ---- ------- -------

runtimePerformance.stop()

停止记录性能数据

runtimePerformance.getEntries()

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

runtimePerformance.getEntriesByType(type)

获取指定类型的性能数据

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

----- ------------ - ---------------------------------------------

runtimePerformance.getEntriesByName(name, type)

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

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

----- ---------------- - ------------------------------------------ ---- ------- ------ -----------

runtimePerformance.toJSON()

获取性能数据的 JSON 字符串

数据类型

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

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

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

----- ------- - --------------------------------
----- ----------------- - -------------------- -- ---------- --- --------------
----- --------------- - -------------------- -- ---------- --- ------------

总结

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

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

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/5f2cd2ef3b0ab45f74a8bbab