perfusorius-js 简介
perfusorius-js 是一个前端性能监控库，在浏览器端使用，可以帮助开发者监控页面渲染的时间，资源加载的时间以及用户行为等等，对于前端性能优化非常有帮助。
perfusorius-js 安装
perfusorius-js 可以通过 npm 或者 yarn 安装，如下所示：
--- ------- --------------
或者
---- --- --------------
安装之后可以使用以下代码引入 perfusorius-js：
------ ----------- ---- -----------------
perfusorius-js 使用方法
使用 perfusorius-js 的方法很简单，只需要在需要监控的代码块中加上 perfusorius.start 和 perfusorius.end 两个方法即可。
下面是一个例子，监控一个 for 循环的执行时间：
----------------------------- -- ---- ------- - - -- - - --------- ---- - -- -- --------- - --------------------------- -- ----
使用 perfusorius-js 监控页面渲染时间的方法如下：
------------- - ---------- - -------------------------- -- ---- -- ----- ------------------------ -- ---- -
这样就可以监控整个页面的加载时间了。
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