什么是 perf-marks
perf-marks 是一个用于前端性能监控的 npm 包，它可以帮助前端开发者实现性能指标的收集与监控。通过 perf-marks，我们可以精确的了解网页加载的整个过程，从而确定哪些地方需要进一步优化，提高网页性能和响应速度。
perf-marks 基于 Performance API，该 API 是从 Chrome 开始推广的浏览器 API，用于监控前端页面的性能，并提供了一些诊断和分析工具。
如何使用 perf-marks
- 安装 perf-marks
使用 npm 安装 perf-marks：
npm install perf-marks --save
- 引入 perf-marks
在需要使用 perf-marks 监控的地方引入：
const perfMarks = require('perf-marks')- 手动添加性能指标
添加性能指标的方法有两种：
方式一：通过 mark 和 measure
- mark(name)：添加一个新的性能指标，name 为指标名称
- measure(name, startMark, endMark)：在 startMark 和 endMark 指定的时间范围内测量性能指标的耗时
perfMarks.mark('start') // 添加开始指标
function fetch() { ... }
fetch()
perfMarks.mark('end') // 添加结束指标
perfMarks.measure('fetchTime', 'start', 'end') // 新增性能指标，计算 fetch 耗时方式二：通过 add 和 calc
- add(name, duration)：手动添加一个性能指标及其耗时
- calc(name, perfEntries)：自动计算多个性能指标的耗时，并将结果添加到指定的性能指标中
-- -------------------- ---- ------- ----- --------- - - ------ --- ------- ---- --- ------ - -------- ------- - --- - ------- --------------------------- - - ----- -------- ---------- --------------- -- - ----- ------ ---------- ------------- - -- -- ---- --------- --------------
perf-marks 示例
下面给大家展示一个 perf-marks 的使用示例，通过代码中添加的性能指标，我们可以了解从发起请求到接收完全并渲染到页面所用的时间，对于前端性能监控和优化非常有帮助。
-- -------------------- ---- -------
----- --------- - ---------------------
--------------------------- -- -----------
------------------------------- -- -- -
---------------------- -- -----------
-- -- ---- - -------
------------- -- -
--------------------------
------------- -- -
------------------------
---------------------------- ----------- ---------
-- -----
-- -----
-- -- --- - ----
----- --------- - -
------ --- -------
---- --- ------
-
-------
--------------------------- -
- ----- -------- ---------- --------------- --
- ----- ------ ---------- ------------- -
--
--
------------- -- -
---------------------------- -- --------
-- --总结
性能监控是前端开发过程中必须重视的一个方面，它可以帮助我们精细化优化代码和提高网页性能表现。使用 perf-marks，我们可以轻松地添加性能指标并进行监控，收集前端性能数据并进行优化，从而提高网页的用户体验。希望本文能对大家在前端性能监控和优化方面提供参考和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f72f08fa9b7065299ccbbed