简介
fbam 是一个用于前端性能监测的 npm 包，通过它可以实时监控页面性能情况，以及帮助我们做出性能优化的决策，是前端开发过程中非常重要的工具。
安装
fbam 支持通过 npm 进行安装，可以在终端中运行下列命令进行安装：
npm install fbam --save-dev
在您的工程中安装好 fbam 后，可以通过如下方式引用：
import Fbam from 'fbam';
使用
使用 fbam 可以很容易地对您的网站进行性能监测和分析，并进行一系列优化。下面介绍 fbam 的主要功能和使用方法。
监测页面性能
要监控当前页面的性能情况，需要在页面加载前插入以下代码：
<script src="node_modules/fbam/lib/fbam.js"></script>
<script>
fbam.start();
</script>您也可以通过以下的 JS 代码来达到同样的效果：
import Fbam from 'fbam'; Fbam.start();
这样 fbam 就能够开始监测浏览器的性能数据了。在应用中，可以通过下列方法来获取性能数据：
const perfData = Fbam.getPerfData(); console.log(perfData);
执行上述代码后，就可以在控制台看到性能数据的输出。
-- -------------------- ---- -------
-
------------------ --------------
------------------- --------------
----------------- --------------
---------------- --
-------------- --
------------- --------------
-------------------- --------------
------------------ --------------
--------------- --------------
------------- --------------
------------------------ --
--------------- --------------
---------------- --------------
-------------- --------------
---
-分析页面性能
fbam 主要针对的是页面性能优化，因此我们可以通过使用数据分析工具来对页面的性能数据进行分析。在 fbam 中，可以通过以下方法获取一些常用的页面性能数据：
const performanceTiming = Fbam.getPerformanceTiming(); const firstPaint = Fbam.getFirstPaint(); const firstContentfulPaint = Fbam.getFirstContentfulPaint(); const timeToInteractive = Fbam.getTimeToInteractive(); const loadTime = Fbam.getLoadTime();
- performanceTiming: 获取完整 web 应用程序性能数据，包括资源请求、DNS 查询和其他。
- firstPaint: 获取第一屏幕渲染时间。
- firstContentfulPaint: 获取第一内容绘制时间。
- timeToInteractive: 获取页面可交互状态的时间。
- loadTime: 获取页面完全加载时间。
分析网站资源
fbam 还支持获取网站资源的性能数据，以找出加载过慢的文件，通过以下代码可以获得资源加载性能数据：
const resourceTiming = Fbam.getResourceTiming(); console.log(resourceTiming);
-- -------------------- ---- -------
-
-
----------- --------------
------------- --------------
---------------- -----
---------------- --------------
------------------ --------------
--------- ---
---------------- ----
---------- -----------
----------- --------------
-------------- ------
----- ------------------------------------------------
---------------- ---
------------ --
-------------- --
------------- --------------
------------ --------------
-------------- --------------
---------------------- --
---------- -----
------------- -----
------------ --
--
---
-对比分析
通过插入 fbam 您可以很容易地获取性能数据，并分析页面中存在的性能问题。可以通过分析数据来确定应用的瓶颈，也可以选择不同的时间点，对比不同的性能数据。例如，我们可以通过下面的代码来比较两次性能数据：
const perfData1 = Fbam.getPerfData(); // perform some actions const perfData2 = Fbam.getPerfData(); const diffData = Fbam.comparePerfData(perfData1, perfData2); console.log(diffData);
自定义
fbam 可以配置一系列参数，以定制它的行为。可以在 start 方法内部传递一个配置对象，用于自定义 fbam 的配置。例如，可以自定义采样率和监测采集时间：
const options = {
sampleRate: 10, // 采样率为 10
timing: 1020, // 设置监测时间为 1.02 秒
};
Fbam.start(options);结论
使用 fbam 可以很好地监测网站性能，并提供一些常用的性能数据，为开发者提供性能优化的线索。在实际使用中，如果需要对页面进行性能优化，建议参考 fbam 的性能数据，根据实际情况进行优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f2a81e8991b448dcbea