npm 包 perfusorius-js 使用教程-JavaScript中文网-JavaScript教程资源分享门户

perfusorius-js 简介

perfusorius-js 是一个前端性能监控库，在浏览器端使用，可以帮助开发者监控页面渲染的时间，资源加载的时间以及用户行为等等，对于前端性能优化非常有帮助。

perfusorius-js 安装

perfusorius-js 可以通过 npm 或者 yarn 安装，如下所示：

npm install perfusorius-js

或者

yarn add perfusorius-js

安装之后可以使用以下代码引入 perfusorius-js：

import perfusorius from 'perfusorius-js';

perfusorius-js 使用方法

使用 perfusorius-js 的方法很简单，只需要在需要监控的代码块中加上 perfusorius.start 和 perfusorius.end 两个方法即可。

下面是一个例子，监控一个 for 循环的执行时间：

perfusorius.start('forLoop'); // 开始监控
for(let i = 0; i < 10000000; i++) {
  // do something
}
perfusorius.end('forLoop'); // 结束监控

使用 perfusorius-js 监控页面渲染时间的方法如下：

window.onload = function() {
  perfusorius.start('页面加载'); // 开始监控
  // 页面初始化
  perfusorius.end('页面加载'); // 结束监控
}

这样就可以监控整个页面的加载时间了。

perfusorius-js API

perfusorius.start(taskName)

开始监控某个任务，taskName 为任务名称，可以自定义。

perfusorius.end(taskName)

结束某个任务的监控，taskName 参数需要与开始监控时的一致。

perfusorius.getState()

获取当前 perfusorius-js 的状态，返回值为一个对象，包含以下属性：

startTime：perfusorius-js 开始监控的时间；
tasks：存储所有任务的数组；
totalTime：所有任务的总执行时间；
isRunning：perfusorius-js 是否在运行。

perfusorius.clear()

清除当前所有任务以及状态。

perfusorius-js 例子

下面是一个例子，监控图片加载时间：

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

在这个例子中，通过 querySelectorAll 获取了所有的图片节点，然后在图片的 onload 事件中通过 perfusorius-js 监控了每一张图片的加载时间。

perfusorius-js 的学习指导意义

在前端开发中，性能一直是一个非常重要的议题，好的用户体验需要良好的性能支撑。而 perfusorius-js 作为一个前端性能监控库，可以帮助我们更加方便地监控页面的性能，寻找潜在的性能问题，从而进行针对性的优化。

同时，perfusorius-js 的实现原理也非常简单易懂，对于想要深入了解前端性能优化的开发者来说，可以通过学习 perfusorius-js 的源码，加深对前端性能监控的理解。

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