随着现代网站功能的增多，前端页面的性能也越来越重要。其中一个重要的性能指标是页面加载速度，而了解页面加载中每一个步骤的耗时情况，对于性能优化是非常有帮助的。本文将介绍一个能够获取页面加载过程中各个步骤的耗时信息的 npm 包 performance-mark-metadata。
performance-mark-metadata 简介
performance-mark-metadata 是一个基于 window.performance.mark API 开发的 npm 包。它可以帮助开发者获取当前页面或其他资源的加载信息，例如 DNS 解析、TCP 连接、TLS/SSL 握手、首字节时间、DOM 解析、页面渲染等等。通过这些信息，开发者可以更好地了解网站的性能瓶颈，以及优化页面加载速度。
performance-mark-metadata 的使用
安装
要使用 performance-mark-metadata，首先需要在项目中安装该 npm 包。打开命令行工具，切换到项目目录下，运行以下命令：
--- ------- -------------------------
引入
安装完成后，需要在项目代码中引入该包。在需要使用该包的文件中添加以下代码：
------ ----------------------------
使用
引入 performance-mark-metadata 后，可以通过前文提到的 window.performance.mark API，在代码中添加标记来记录每个阶段的耗时，并将这些信息保存在 performance mark data 中。
例如，在页面渲染结束之后，我们想要获取 DNS 解析、TCP 连接、首字节时间、DOM 解析、页面渲染等阶段的耗时，可以在代码中添加如下标记：
-- -- -- --- ----
-----------------------------------
----- ------------------- - ------------------
-- -- -- --- ----
-----------------------------------
----- ------------ - ------------------
-- -- -- ------- ----
-----------------------------------
----- ------------ - ------------------
-- -- ---------
------------------------------------
----- ------------- - ------------------
-- -- -- --- ----
-----------------------------------
----- ------------ - ------------------
-- -------
------------------------------------
----- ------------- - ------------------
----- -------------- - ------------------- - ----------------- - ------------------- - ----------
----- ------- - ------------ - ----------------- - ------------ - ----------
----- ------- - ------------ - ----------------- - ------------ - ----------
----- -------- - ------------- - ----------------- - ------------- - ----------
----- ------- - ------------ - ----------------- - ------------ - ----------
----- ----- - -------------------------------------
----- ------------ - ---------------- -- -
----- - ----- --------- - - -----
------ -
-----
---------
--
---
----- ------------------- - -
---------------
--------
--------
---------
--------
----------- --------------
------ ------------
--
---------------------------------上述代码中，我们通过 performance.mark 方法添加了各个阶段的标记，并使用 performance.getEntriesByType 方法获取了所有的标记信息。然后，我们将运行的结果保存在 performance mark data 对象中，并将其输出到控制台中。
可视化展示
无论是开发还是测试，我们都需要将性能数据可视化以更好地了解网站的性能情况。常用的可视化工具有 Chrome 自带的 DevTools、Mozilla 的 Firefox DevTools 等。具体操作如下：
- 在 Chrome 浏览器中打开 DevTools。
- 选择 Performance 选项卡。
- 点击左下角 Record button (录制按钮)，开始记录性能数据。
- 进行一系列操作，例如输入 URL、点击页面等等，直到页面加载完成。
- 点击左下角 Stop button (停止按钮)，停止记录性能数据。
- 将捕获到的性能数据保存下来，以便后续分析。
通过以上步骤，我们可以获取到页面加载时的相关性能数据，包括各个阶段的耗时和可视化的数据。
总结
本文介绍了 npm 包 performance-mark-metadata 的使用方法，通过添加 performance mark 标记来获取页面加载各个阶段的耗时信息，并通过可视化工具将数据进行展示，从而更好地了解网站的性能情况。对于性能优化和提升用户体验，非常有帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005673b81e8991b448e3bfe