随着现代网站功能的增多，前端页面的性能也越来越重要。其中一个重要的性能指标是页面加载速度，而了解页面加载中每一个步骤的耗时情况，对于性能优化是非常有帮助的。本文将介绍一个能够获取页面加载过程中各个步骤的耗时信息的 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 包。打开命令行工具，切换到项目目录下，运行以下命令：
npm install performance-mark-metadata
引入
安装完成后，需要在项目代码中引入该包。在需要使用该包的文件中添加以下代码：
import 'performance-mark-metadata';
使用
引入 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
