令程序员头疼的性能问题，这一款性能分析工具帮你实时监控( 三 ) _性能分析

DevTools 将作为 Web 应用程序，Chromium 作为服务端提供连接。
通过 HTTP 提取 HTML、JavaScript 和 css 文件。
资源加载后，DevTools 会建立与浏览器的 Websocket 连接，并开始交换 JSON 消息。

同样的，当我们通过 DevTools 从 windows、Mac 或 linux 计算机远程调试 Android 设备上的实时内容时，使用的也是该协议。当 Chromium 以一个--remote-debugging-port=0标志启动时，它将启动 Chrome DevTools 协议服务器。
Chrome DevTools 协议域划分Chrome DevTools 协议具有与浏览器的许多不同部分（例如页面、Service Worker 和扩展程序）进行交互的 API 。该协议把不同的操作划分为了不同的域（domain），每个域负责不同的功能模块。比如DOM、Debugger、Network、Console和Performance等，可以理解为 DevTools 中的不同功能模块。
使用该协议我们可以：

获取 JS 的 Runtime 数据，常用的如window.performance和window.chrome.loadTimes()等
获取Network及Performance数据，进行自动性能分析
使用 Puppeteer 的 CDPSession，与浏览器的协议通信会变得更加简单

与性能相关的域本文讲性能分析相关，因此这里我们只关注和性能相关的域。
1. Performance 。从Performance域中Performance.getMetrics()可以拿到获取运行时性能指标包括：

Timestamp: 采取度量样本的时间戳
Documents: 页面中的文档数
Frames: 页面中的帧数
JSEventListeners: 页面中的事件数
Nodes: 页面中的 DOM 节点数
LayoutCount: 全部或部分页面布局的总数
RecalcStyleCount: 页面样式重新计算的总数
LayoutDuration: 所有页面布局的合并持续时间
RecalcStyleDuration: 所有页面样式重新计算的总持续时间
ScriptDuration: JavaScript 执行的持续时间
TaskDuration: 浏览器执行的所有任务的合并持续时间
JSHeapUsedSize: 使用的 JavaScript 栈大小
JSHeapTotalSize: JavaScript 栈总大小

2. Tracing 。Tracing域可获取页面加载的 DevTools 性能跟踪。可以使用Tracing.start和Tracing.stop创建可在 Chrome DevTools 或时间轴查看器中打开的跟踪文件。
我们能看到生成的 JSON 文件长这样：

文章插图

这样的 JSON 文件，我们可以丢到 DevTools Timeline Viewer 中，可以看到对应的时间轴和火焰图：

文章插图

3. Runtime 。Runtime域通过远程评估和镜像对象暴露 JavaScript 的运行时。可以通过Runtime.getHeapUsage获取 JavaScript 栈的使用情况，通过Runtime.evaluate计算全局对象的表达式，通过Runtime.queryObjects迭代 JavaScript 栈并查找具有给定原型的所有对象（可用于计算原型链中某处具有相同原型的所有对象，衡量 JavaScript 内存泄漏）。
除了上面介绍的这些，还有Network可以分析网络相关的性能，以及其他可能涉及 DOM 节点、JS 执行等各种各样的数据分析，更多的可能需要大家自己去研究了。
自动化性能分析通过使用 Chrome DevTools 协议，我们可以获取 DevTools 提供的很多数据，包括网络数据、性能数据、运行时数据。
对于如何使用该协议，其实已经有很多大神针对这个协议封装出不同语言的库，包括 Node.js、Python、Java 等，可以根据需要在 awesome-chrome-devtools 这个项目中找到。
至于我们到底能拿到怎样的数据，可以做到怎样的自动化程度，就不在本文里讲述啦，后面有机会再开篇文章详细讲讲。
参考