简介
fbam 是一个用于前端性能监测的 npm 包，通过它可以实时监控页面性能情况，以及帮助我们做出性能优化的决策，是前端开发过程中非常重要的工具。
安装
fbam 支持通过 npm 进行安装，可以在终端中运行下列命令进行安装：
--- ------- ---- ----------
在您的工程中安装好 fbam 后，可以通过如下方式引用：
------ ---- ---- -------
使用
使用 fbam 可以很容易地对您的网站进行性能监测和分析，并进行一系列优化。下面介绍 fbam 的主要功能和使用方法。
监测页面性能
要监控当前页面的性能情况，需要在页面加载前插入以下代码：
------- ---------------------------------------------
--------
-------------
---------您也可以通过以下的 JS 代码来达到同样的效果：
------ ---- ---- ------- -------------
这样 fbam 就能够开始监测浏览器的性能数据了。在应用中，可以通过下列方法来获取性能数据：
----- -------- - ------------------- ----------------------
执行上述代码后，就可以在控制台看到性能数据的输出。
-
------------------ --------------
------------------- --------------
----------------- --------------
---------------- --
-------------- --
------------- --------------
-------------------- --------------
------------------ --------------
--------------- --------------
------------- --------------
------------------------ --
--------------- --------------
---------------- --------------
-------------- --------------
---
-分析页面性能
fbam 主要针对的是页面性能优化，因此我们可以通过使用数据分析工具来对页面的性能数据进行分析。在 fbam 中，可以通过以下方法获取一些常用的页面性能数据：
----- ----------------- - ---------------------------- ----- ---------- - --------------------- ----- -------------------- - ------------------------------- ----- ----------------- - ---------------------------- ----- -------- - -------------------
- performanceTiming: 获取完整 web 应用程序性能数据，包括资源请求、DNS 查询和其他。
- firstPaint: 获取第一屏幕渲染时间。
- firstContentfulPaint: 获取第一内容绘制时间。
- timeToInteractive: 获取页面可交互状态的时间。
- loadTime: 获取页面完全加载时间。
分析网站资源
fbam 还支持获取网站资源的性能数据，以找出加载过慢的文件，通过以下代码可以获得资源加载性能数据：
----- -------------- - ------------------------- ----------------------------
-
-
----------- --------------
------------- --------------
---------------- -----
---------------- --------------
------------------ --------------
--------- ---
---------------- ----
---------- -----------
----------- --------------
-------------- ------
----- ------------------------------------------------
---------------- ---
------------ --
-------------- --
------------- --------------
------------ --------------
-------------- --------------
---------------------- --
---------- -----
------------- -----
------------ --
--
---
-对比分析
通过插入 fbam 您可以很容易地获取性能数据，并分析页面中存在的性能问题。可以通过分析数据来确定应用的瓶颈，也可以选择不同的时间点，对比不同的性能数据。例如，我们可以通过下面的代码来比较两次性能数据：
----- --------- - ------------------- -- ------- ---- ------- ----- --------- - ------------------- ----- -------- - ------------------------------- ----------- ----------------------
自定义
fbam 可以配置一系列参数，以定制它的行为。可以在 start 方法内部传递一个配置对象，用于自定义 fbam 的配置。例如，可以自定义采样率和监测采集时间：
----- ------- - -
----------- --- -- ---- --
------- ----- -- ------- ---- -
--
--------------------结论
使用 fbam 可以很好地监测网站性能，并提供一些常用的性能数据，为开发者提供性能优化的线索。在实际使用中，如果需要对页面进行性能优化，建议参考 fbam 的性能数据，根据实际情况进行优化。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055f2a81e8991b448dcbea