前言
tracium 是一个基于 Chrome DevTools 的性能分析工具。它可以为您的页面生成一份资源使用情况的报告，内容详细而全面。本文将为您详细介绍如何使用 tracium。
安装
tracium 是一个 npm 包，安装非常简便。只需要在终端输入以下命令即可：
npm install tracium
使用
以下是使用 tracium 的基本流程：
1. 导入模块
在代码中导入 tracium：
const tracium = require('tracium');2. 获取资源
获取要分析的资源。我们可以使用 chrome-remote-interface 获取页面的 WebSocketDebuggerUrl：
-- -------------------- ---- ------- ----- --- - ----------------------------------- ----- ------ - ------------------------ --------- -------- -- - ----- - -------- ---- - - ------- ----- ----------------- ----- -------------- ----- --------------- ---- ------ --- ----- ---------------------- ----- - -------------------- - - ----- -------------- ----- - --------- - - ----- --------------- ---- ------- ---- -------------------- --- -- --- --------------- -------------- ----- -- - ------------------- ---
3. 分析资源
使用 tracium 提供的 trace 方法分析资源：
const { resources } = await tracium.trace({ url: target, tab: webSocketDebuggerUrl });
const { timings, networkRecords } = await tracium.analyze({ resources });timings 是一个包含了页面加载过程中各个阶段时间的对象，networkRecords 是所有网络请求的信息。
4. 展示报告
将分析结果展示出来：
console.log(timings, networkRecords);
深入理解
analyze 方法
在进行分析前，我们需要了解 analyze 方法的参数。它是一个对象，包含以下属性：
- resources: 之前获取到的资源集合
- includeTextFromResponseBody: 是否要从响应中包含所有文本
- jsonTracing: 一些 Chrome DevTools 的政策设置
在 analyze 方法中，我们通过 resources 属性获取资源集合，并通过 timing 和 networkRecords 两个属性获取分析结果。
analyze 方法的执行过程
当我们调用 analyze 方法时，它会遍历整个资源集合，通过多个函数和方法计算和生成各个属性的值。以下是 analyze 方法的执行过程：
- 计算所有请求的大小和类型
- 对于非 CSS 渲染的请求，将它们放在
nonResourceEntries中 - 计算跨域资源的大小
- 计算 IP 地址和域名
- 合并单个 URL 的请求，合并为一个传输大小更大的请求以降低网络开销。
- 计算应用程序的大小
在所有函数和方法都执行完成后，analyze 方法会返回一个包含了 timings 和 networkRecords 的对象。
示例代码
以下是一个综合使用 tracium 的示例代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ----------------------------------- ----- ------ - ------------------------ --------- -------- -- - ----- - -------- ---- - - ------- ----- ----------------- ----- -------------- ----- --------------- ---- ------ --- ----- ---------------------- ----- - -------------------- - - ----- -------------- ----- - --------- - - ----- --------------- ---- ------- ---- -------------------- --- ----- - -------- -------------- - - ----- ----------------- --------- --- -------------------- ---------------- --------------- -------------- ----- -- - ------------------- ---
结论
tracium 是一个非常好用的性能分析工具，它可以帮助我们快速了解页面资源使用情况。在多数场合下，它能够有效地提高我们代码的整体性能。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6cb59da9b7065299ccb962