Sysbeat 是一个开源的 npm 包，提供了前端应用性能监控的功能。在开发过程中，我们经常需要监测我们的应用程序性能，以便在其出现问题时及时诊断和排除问题。而 Sysbeat 就是一款非常好用的工具，它能够帮助我们监控前端应用的性能指标。
安装 Sysbeat
使用 npm 进行安装:
npm install sysbeat --save
基础配置
在你的应用程序中使用 Sysbeat，你需要在入口处初始化 Sysbeat：
import { Sysbeat } from 'sysbeat';
Sysbeat.init({
appId: 'your_app_id',
secret: 'your_secret'
});其中，你需要传入一个 appId 和一个 secret，这两个属性可以在 Sysbeat 控制台中获取到。
监测页面性能
Sysbeat 可以用于监测整个页面的性能指标。你可以在你的代码中加入以下语句，实现监测页面中所有资源的加载时间。
Sysbeat.pageStart();
Sysbeat 还提供了 Sysbeat.pageEnd() 用于表示页面加载结束。
如果你希望只监控某一个子任务的性能指标，你还可以使用 Sysbeat.mark()，可以我们在代码中执行一下操作：
-- -------------------- ---- ------- -------------------- -- ------ ------- -- -- --------- ------------------ ------- -- -------- ------- -- -- --------- ----------------------- ------------------
当任务结束并调用 Sysbeat.pageEnd() 方法后，Sysbeat 会将各个打点的时间信息都提交给 Sysbeat 服务器。
监测接口性能
Sysbeat 还可以监测接口的性能指标。你只需要为每一个接口定义一个 alias，并在每一个响应结束后打点即可。
axios.get('your api url').then(function (res) {
// your code here...
Sysbeat.mark('your api alias name end');
});符号变量
Sysbeat 还支持添加符号变量。符号变量指的是我们希望给一些指标指定一个名字，方便我们进行查看。
这个功能可以在使用 Sysbeat.init 初始化的时候设置。
-- -------------------- ---- -------
------ - ------- - ---- ----------
--------------
------ --------------
------- --------------
--------------- -
----------------- -----------
------------ --------
-
---总结
使用 Sysbeat 监控前端应用性能是一件非常简单的事情。你只需要在你的应用程序的入口处初始化 Sysbeat，并在合适的时间节点加入监测指令即可。通过 Sysbeat，我们可以方便地监测前端应用的性能指标，以及及时诊断和排除问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668081e8991b448e29a7