简介
在前端开发中，我们常常需要对页面性能进行优化，这时候使用性能追踪工具是非常有必要的。@wearejust/trace 就是一个基于浏览器性能 API，提供给开发者在上报性能信息时进行自定义统计的 npm 包。
安装
在安装之前，需要确保已经安装了 Node.js 和 npm。安装命令如下：
npm install @wearejust/trace --save
使用
基本用法
首先，需要在项目中引入该模块，然后通过 Trace 类进行实例化，并在需要统计性能信息的代码块中调用 Trace 实例提供的方法。
-- -------------------- ---- ------- ------ ----- ---- ------------------ ----- ----- - --- ------- -- ----------- ------------- - ---------- - ---------------------------- - -- -------------- ----- ----- -------------------------- ------ ------- ------ -----
上面的代码中，我们是在页面加载完成后设置了一个 marker（appLoaded），同时在获取数据的异步操作中调用了 measure 方法，用来记录数据获取所花费的时间。
API
setMarker(markerName: string)
用于设置时间戳，记录 markerName 对应的事件触发的时间。
measure(markerName: string, startMarkerName: string, endMarkerName: string)
用于记录从 startMarkerName 到 endMarkerName 之间的时间，最后生成 performance.mark 和 performance.measure 的一系列浏览器性能 API 接口。
getEntriesByName(name: string)
获取所有 performance entry，通过 entry 的 name 字段进行筛选。
getEntriesByType(type: string)
获取所有 performance entry，通过 entry 的 entryType 字段进行筛选。
getEntriesByInitiatorType(initiatorType: string)
获取所有 performance entry，通过 entry 的 initiatorType 字段进行筛选。
getReport(options: ReportOptions)
生成统计报告，可设置最大展示的 entry 数量、最少占比、最少时间等参数。
interface ReportOptions {
maxEntries?: number; // 最大展示的 entry 数量，默认为 10
minDuration?: number; // 最少时间，单位毫秒，默认为 0
minRatio?: number; // 最少占比，默认为 0，即不筛选
detail?: boolean; // 是否显示所有 entry 详细信息，默认为 false，只显示 summary 信息
}示例
-- -------------------- ---- -------
------ ----- ---- ------------------
----- ----- - --- -------
------------- - ---------- -
----------------------------
-
----------------------------------------
----------- -------- -- -
----- ---- - ----- ---------------
-------------------------- ------------ ------ -----
-- ----
--
------------ -- -
-------------------- ------ ----------
--
------------------------------------------- -- -- -
-----------------------------------
--
------------------------------- -- -- -
-------------------------------
-------------------------- ------------------- ---------------
----- ------ - -----------------
----------- ---
------------ ---
--------- ----
------- -----
--
---------------------
--上面的代码设置了三个 marker，分别为 appLoaded、DOMContentLoaded 和 windowLoaded，同时还使用了 measure 方法来记录数据获取所花费的时间和页面渲染所花费的总时间，在 load 事件中调用了 getReport 方法来生成一个统计报告，并将结果打印到控制台中。
总结
在实际的开发中，优化网页的性能是一个非常重要的工作，@wearejust/trace 提供了一个非常方便的方法来帮助我们追踪代码的性能，从而快速定位项目中的性能瓶颈。本篇文章详细介绍了 @wearejust/trace 的使用方法，并提供了示例代码，希望能够帮助到读者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b49c6eb7e50355dbf91