在前端开发中，性能优化一直是一个重要的话题。为了提高网站性能，开发人员必须了解不同的性能优化技术。为了简化性能优化的流程，许多 npm 包被创建出来，其中之一就是 utilise.perf。
该 npm 包是一个用于浏览器性能分析的工具集。它可以帮助开发人员检测出性能瓶颈并提供优化建议。本文将详细介绍如何使用 utilise.perf，以及它如何帮助我们提高网站的性能。
安装
在使用 utilise.perf 之前，需要将其安装到我们的项目中。可执行以下命令：
npm install utilise.perf --save-dev
使用
一旦安装完成，我们就可以开始使用 utilise.perf 了。
首先，在我们的脚本中引入 utilise.perf：
const perf = require('utilise.perf')接下来，添加我们想要检测性能的代码，并在代码开始前调用 perf.start()。代码执行结束后，调用 perf.end() 即可停止性能分析并输出分析结果。
perf.start() // 我们要检测性能的代码 perf.end()
perf.end() 方法接受一个参数，用于设置输出分析结果的详情程度。该参数有 3 种可选值：
summary（默认值）：输出概览信息。detail：输出详细信息，包括每个请求的时间信息。full：输出完整信息，包括每个请求的请求与响应 headers 信息。
perf.end('detail')示例
现在，我们来看一个使用 utilise.perf 的示例。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------ ------------ ---- --------------------
----- ---------------- -----------------
-------
------
--------------- ------------ ---- -----------------
----
------ ------------- ----------
------ ------------- ----------
------ ------------- ----------
------ ------------- ----------
------ ------------- ----------
-----
------- ----------------------
-------
--------- -------------------- ---- -------
----- ---- - -----------------------
------------
----- ----- - ------------------------------
--- ---- - - -- - - ------------- ---- -
---------------------------------- ----------- -
------------------
---------- ------- -- - - -------------------
--
-
------------------在该示例中，我们要监听一个包含链接的列表的点击事件。我们希望使用 utilise.perf 来检测该代码的性能。
我们首先在代码开始前调用 perf.start()，然后在代码执行结束后调用 perf.end()。在这种情况下，由于我们希望查看每个请求的时间信息，因此将 perf.end() 的参数设置为 detail。
在控制台中，我们可以看到输出的性能信息，包括每个请求的时间信息、总时间、请求总数等等。
-- -------------------- ---- -------
-------------
--------- -----------------
------------- -
--------
- ---- ------------------------------
----- --------
--------- ------------------
- ---- ---------------------------------
----- ------------
--------- ------------------
- ---- ------------------------
----- ----------
--------- -----------------
- ---- ------------------------
----- ----------
--------- --------------------
- ---- ------------------------
----- ----------
--------- -----------------结论
在本篇文章中，我们介绍了如何使用 utilise.perf 这个 npm 包来检测我们的性能代码。通过使用该工具，我们可以查看每个请求的时间信息，从而找到性能瓶颈并进行优化。utilise.perf 为开发人员提供了一个强大的工具，可用于确保他们的应用程序在性能方面保持最佳状态。
要学习更多关于 npm 包 utilise.perf 的信息，请查看官方文档 https://github.com/developit/utilise.perf。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f40dfbfdbf7be33b2567275