JS `Chromium DevTools Protocol` `CDP` `Tracing` `Performance Events` `Custom Metrics`

咳咳，大家好，我是老码农，今天咱们聊聊Chrome DevTools Protocol (CDP) 里面的 Tracing 和 Performance Events，以及怎么用它们来做 Custom Metrics。这玩意儿听起来有点高大上，其实没那么复杂，咱们争取用最接地气的方式把它搞明白。

开场白：为啥要关心这些玩意儿？

想象一下，你辛辛苦苦写了个网页，自我感觉良好，但用户一用就卡成PPT。这时候怎么办？瞎猜吗？当然不行！我们需要一些工具，一些数据，来告诉我们到底哪里出了问题。CDP Tracing 和 Performance Events 就是这样的工具，它们能像X光一样，帮你透视你的网页，找出性能瓶颈。而 Custom Metrics 则是你定制的“体检指标”，让你更精准地关注关键性能数据。

第一部分：Chrome DevTools Protocol (CDP) 简介

CDP 是什么？简单来说，它就是 Chrome 浏览器暴露出来的一组 API，你可以通过这些 API 控制 Chrome 的各种行为，比如打开网页、点击按钮、获取网页内容，当然也包括我们今天重点讲的 Tracing 和 Performance Events。

你可以把它想象成一个遥控器，你可以用它来遥控你的 Chrome 浏览器。这个遥控器有很多按钮（API），每个按钮都有不同的功能。

怎么用 CDP？

CDP 可以通过多种方式使用，最常见的是 Node.js。你需要安装一个 CDP 的 Node.js 客户端库，比如 chrome-remote-interface 或者 puppeteer。这里我们用 chrome-remote-interface 举例：

1. 安装：

   npm install chrome-remote-interface

2. 连接 Chrome：

   首先，你需要启动一个 Chrome 实例，并开启远程调试端口。最简单的方法是使用 Chrome Canary 或者 Chrome 的 --remote-debugging-port 参数：

   chrome --remote-debugging-port=9222

   然后，在你的 Node.js 代码中连接到 Chrome：

   const CDP = require('chrome-remote-interface');
   
   CDP({port: 9222}, async (client) => {
     const {Page, Tracing} = client;
   
     try {
       await Page.enable();
       await Tracing.start({categories: 'devtools.timeline'});
   
       // 在这里执行你的网页操作，比如 Page.navigate
   
       await Tracing.end();
       const {data} = await Tracing.getBufferUsage();
       console.log("Tracing Buffer Usage: ", data);
   
       const {stream} = await Tracing.transferData();
       console.log("Tracing Data Stream: ", stream);
   
       const {traceEvents} = await Tracing.getData({});
       console.log("Tracing Events: ", traceEvents);
   
       await Tracing.clear();
   
     } catch (err) {
       console.error('Error:', err);
     } finally {
       await client.close();
     }
   }).on('error', (err) => {
     console.error('Cannot connect to Chrome:', err);
   });

   这段代码连接到 Chrome，开启 Tracing，执行一些操作（这里只是一个占位符），然后停止 Tracing，获取 Tracing 数据，并关闭连接。

第二部分：Tracing – 追踪网页的每一个细节

Tracing 就像一个录像机，它会记录下你在网页上的所有操作，包括 JavaScript 的执行、DOM 的渲染、网络请求等等。这些记录会被保存成一个叫做 Trace Events 的 JSON 格式的数据。

Trace Events 结构：

Trace Events 是一个数组，每个元素都是一个 JSON 对象，描述了一个事件。每个事件都有一些通用的属性，比如：

• name: 事件的名称，比如 "ParseHTML"、"EvaluateScript" 等等。
• cat: 事件的类别，比如 "blink.console"、"v8" 等等。
• ph: 事件的阶段，比如 "B" (Begin)、"E" (End)、"X" (Complete) 等等。
• ts: 事件的时间戳，单位是微秒。
• pid: 进程 ID。
• tid: 线程 ID。
• args: 事件的参数，包含了事件的详细信息。

一个典型的 Trace Event 可能是这样的：

{
  "name": "EvaluateScript",
  "cat": "v8",
  "ph": "X",
  "ts": 1234567890,
  "pid": 1234,
  "tid": 5678,
  "dur": 1000,
  "args": {
    "data": {
      "url": "https://example.com/script.js",
      "lineNumber": 10,
      "columnNumber": 20
    }
  }
}

这个事件表示 V8 引擎执行了一个 JavaScript 脚本，脚本的 URL 是 https://example.com/script.js，执行时间是 1000 微秒。

怎么开启 Tracing？

在上面的 Node.js 代码中，我们已经看到了怎么开启 Tracing：

await Tracing.start({categories: 'devtools.timeline'});

Tracing.start() 方法接受一个 categories 参数，用来指定要追踪的事件类别。devtools.timeline 是一个常用的类别，它包含了大部分的性能相关的事件。你也可以指定多个类别，用逗号分隔：

await Tracing.start({categories: 'devtools.timeline,v8,blink.console'});

常用的 Tracing Categories：

Category	描述
devtools.timeline	包含了大部分的性能相关的事件，比如 JavaScript 执行、DOM 渲染、网络请求等等。
v8	包含了 V8 引擎的事件，比如 JavaScript 的编译、优化、垃圾回收等等。
blink.console	包含了 console.log 等控制台输出的事件。
disabled-by-default-devtools.timeline.frame	包含了每一帧的渲染信息，比如 FPS、渲染时间等等。
toplevel	包含了顶层事件，比如页面加载、脚本执行等等。
loading	包含了网络请求相关的事件，比如 DNS 查询、TCP 连接、HTTP 请求等等。
latencyInfo	包含了延迟信息，可以用来分析网络延迟。

怎么分析 Tracing 数据？

拿到 Tracing 数据后，你可以用 Chrome DevTools 的 Performance 面板来分析它。打开 Performance 面板，点击左上角的 "Load profile…" 按钮，选择你的 Tracing JSON 文件，就可以看到一个详细的性能分析报告。

当然，你也可以用代码来分析 Tracing 数据。比如，你可以用 JavaScript 来统计某个事件的执行次数、总耗时等等。

第三部分：Performance Events – 更轻量级的性能监控

Performance Events 是另一种性能监控的方式，它比 Tracing 更轻量级，更适合用来做实时的性能监控。

PerformanceObserver API：

Performance Events 是通过 PerformanceObserver API 来获取的。PerformanceObserver API 是一个 Web API，它可以让你监听浏览器中的一些性能事件，比如：

• paint: 渲染事件，比如第一次渲染、内容渲染等等。
• resource: 资源加载事件，比如图片、CSS、JavaScript 等等。
• navigation: 导航事件，比如页面加载、页面跳转等等。
• longtask: 长任务事件，表示一个 JavaScript 任务执行时间超过 50 毫秒。
• layout-shift: 布局偏移事件，表示页面布局发生了意外的偏移。
• largest-contentful-paint: 最大内容渲染事件，表示页面上最大的内容元素渲染完成的时间。
• first-input-delay: 首次输入延迟事件，表示用户第一次与页面交互到页面响应的时间。

怎么使用 PerformanceObserver API？

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry.entryType, entry);
  });
});

observer.observe({type: 'paint', buffered: true});
observer.observe({type: 'resource', buffered: true});
observer.observe({type: 'longtask', buffered: true});
observer.observe({type: 'layout-shift', buffered: true});
observer.observe({type: 'largest-contentful-paint', buffered: true});
observer.observe({type: 'first-input-delay', buffered: true});

这段代码创建了一个 PerformanceObserver 对象，并监听了 paint、resource、longtask、layout-shift、largest-contentful-paint、first-input-delay 这几个事件。当这些事件发生时，PerformanceObserver 会调用回调函数，并将事件的信息传递给回调函数。

buffered: true 表示获取之前已经发生的事件。

Performance Events 的优势：

• 轻量级： Performance Events 只会记录你关心的事件，不会像 Tracing 一样记录所有的细节，所以性能开销更小。
• 实时性： Performance Events 可以实时地获取性能数据，方便你做实时的性能监控。
• Web API： PerformanceObserver API 是一个 Web API，可以直接在浏览器中使用，不需要依赖 CDP。

Performance Events 的局限性：

• 事件种类有限： Performance Events 只提供了一些预定义的事件，如果你需要更详细的性能数据，就需要使用 Tracing。
• 数据不够详细： Performance Events 只会记录事件的基本信息，不会像 Tracing 一样记录事件的详细参数。

第四部分：Custom Metrics – 定制你的性能指标

有了 Tracing 和 Performance Events，我们就可以获取到各种各样的性能数据。但是，这些数据本身并没有什么意义，我们需要把它们转化成有意义的指标，才能更好地了解网页的性能。

Custom Metrics 就是你定制的性能指标。你可以根据你的业务需求，定义一些你关心的指标，比如：

• 页面加载时间： 从用户打开网页到网页完全加载完成的时间。
• 首屏渲染时间： 从用户打开网页到首屏内容渲染完成的时间。
• 交互响应时间： 从用户点击按钮到页面响应的时间。
• 错误率： 网页上发生错误的比例。

怎么定义 Custom Metrics？

定义 Custom Metrics 并没有固定的方法，你需要根据你的业务需求来决定。一般来说，你需要考虑以下几个因素：

• 你要监控什么？ 你要监控哪些性能指标？
• 怎么获取数据？ 你要用什么方式来获取数据？是 Tracing 还是 Performance Events？
• 怎么计算指标？ 你要用什么公式来计算指标？
• 怎么展示指标？ 你要用什么方式来展示指标？是图表还是表格？

Custom Metrics 的例子：

1. 页面加载时间：

   你可以用 navigation 类型的 Performance Events 来计算页面加载时间：

   const observer = new PerformanceObserver((list) => {
     list.getEntries().forEach((entry) => {
       if (entry.entryType === 'navigation') {
         const pageLoadTime = entry.loadEventEnd - entry.startTime;
         console.log('页面加载时间：', pageLoadTime, 'ms');
       }
     });
   });
   
   observer.observe({type: 'navigation', buffered: true});

2. 首屏渲染时间：

   你可以用 largest-contentful-paint 类型的 Performance Events 来计算首屏渲染时间：

   const observer = new PerformanceObserver((list) => {
     list.getEntries().forEach((entry) => {
       if (entry.entryType === 'largest-contentful-paint') {
         const lcp = entry.startTime + entry.duration;
         console.log('首屏渲染时间：', lcp, 'ms');
       }
     });
   });
   
   observer.observe({type: 'largest-contentful-paint', buffered: true});

3. 交互响应时间：

   你可以用 first-input-delay 类型的 Performance Events 来计算交互响应时间：

   const observer = new PerformanceObserver((list) => {
     list.getEntries().forEach((entry) => {
       if (entry.entryType === 'first-input-delay') {
         const fid = entry.value;
         console.log('首次输入延迟：', fid, 'ms');
       }
     });
   });
   
   observer.observe({type: 'first-input-delay', buffered: true});

4. 自定义事件：

   有时候，预定义的 Performance Events 不能满足你的需求，你可以使用 Performance.mark() 和 Performance.measure() API 来创建自定义的性能事件。

   // 在某个操作开始之前
   performance.mark('my-operation-start');
   
   // 执行你的操作
   // ...
   
   // 在操作结束之后
   performance.mark('my-operation-end');
   
   // 计算操作的耗时
   performance.measure('my-operation', 'my-operation-start', 'my-operation-end');
   
   const observer = new PerformanceObserver((list) => {
     list.getEntries().forEach((entry) => {
       if (entry.entryType === 'measure') {
         console.log('自定义操作耗时：', entry.duration, 'ms');
       }
     });
   });
   
   observer.observe({type: 'measure', buffered: true});

   这段代码首先使用 performance.mark() API 创建了两个标记，分别表示操作的开始和结束。然后，使用 performance.measure() API 计算了操作的耗时。最后，使用 PerformanceObserver API 监听 measure 类型的事件，获取操作的耗时。

展示 Custom Metrics：

你可以用各种方式来展示 Custom Metrics，比如图表、表格、仪表盘等等。常用的图表库有：

• Chart.js： 一个简单易用的图表库。
• ECharts： 一个功能强大的图表库。
• D3.js： 一个灵活强大的数据可视化库。

第五部分：实战案例：监控一个 React 应用的性能

假设我们有一个 React 应用，我们想监控它的性能，包括：

• 页面加载时间
• 首屏渲染时间
• 组件渲染时间

我们可以用以下步骤来实现：

1. 安装依赖：

   npm install chrome-remote-interface react react-dom

2. 修改 React 代码，添加性能标记：

   import React, { useEffect } from 'react';
   
   function MyComponent() {
     useEffect(() => {
       performance.mark('component-mount-start');
       return () => {
         performance.mark('component-unmount-start');
       };
     }, []);
   
     useEffect(() => {
       performance.mark('component-mount-end');
       performance.measure('component-mount', 'component-mount-start', 'component-mount-end');
   
       return () => {
         performance.mark('component-unmount-end');
         performance.measure('component-unmount', 'component-unmount-start', 'component-unmount-end');
       };
     }, []);
   
     return (
       <div>
         <h1>Hello, React!</h1>
       </div>
     );
   }
   
   export default MyComponent;

   这段代码在组件挂载和卸载时添加了性能标记，并计算了组件挂载和卸载的耗时。

3. 创建 CDP 脚本，开启 Tracing 和 PerformanceObserver：

   const CDP = require('chrome-remote-interface');
   const fs = require('fs');
   
   CDP({port: 9222}, async (client) => {
     const {Page, Tracing, Runtime} = client;
   
     try {
       await Page.enable();
   
       // 开启 PerformanceObserver
       await Runtime.evaluate({
         expression: `
           const observer = new PerformanceObserver((list) => {
             list.getEntries().forEach((entry) => {
               console.log(entry.entryType, entry);
               // 在这里你可以把数据发送到你的服务器
             });
           });
   
           observer.observe({type: 'paint', buffered: true});
           observer.observe({type: 'resource', buffered: true});
           observer.observe({type: 'longtask', buffered: true});
           observer.observe({type: 'layout-shift', buffered: true});
           observer.observe({type: 'largest-contentful-paint', buffered: true});
           observer.observe({type: 'first-input-delay', buffered: true});
           observer.observe({type: 'measure', buffered: true}); // 监听自定义事件
         `
       });
   
       // 开启 Tracing
       await Tracing.start({categories: 'devtools.timeline'});
   
       // 导航到你的 React 应用
       await Page.navigate({url: 'http://localhost:3000'}); // 假设你的 React 应用运行在 3000 端口
   
       // 等待一段时间，让页面加载完成
       await new Promise(resolve => setTimeout(resolve, 5000));
   
       // 停止 Tracing
       await Tracing.end();
       const {data} = await Tracing.getBufferUsage();
       console.log("Tracing Buffer Usage: ", data);
   
       const {stream} = await Tracing.transferData();
       console.log("Tracing Data Stream: ", stream);
   
       const {traceEvents} = await Tracing.getData({});
   
       // 将 Tracing 数据保存到文件
       fs.writeFileSync('trace.json', JSON.stringify(traceEvents, null, 2));
   
       await Tracing.clear();
   
     } catch (err) {
       console.error('Error:', err);
     } finally {
       await client.close();
     }
   }).on('error', (err) => {
     console.error('Cannot connect to Chrome:', err);
   });

   这段代码首先连接到 Chrome，然后开启 PerformanceObserver 和 Tracing。然后，导航到你的 React 应用，等待一段时间，让页面加载完成。最后，停止 Tracing，并将 Tracing 数据保存到文件。

4. 运行 CDP 脚本：

   node your-cdp-script.js

   运行这个脚本，你就可以在控制台看到 PerformanceObserver 打印的性能数据，以及保存到 trace.json 文件的 Tracing 数据。

5. 分析 Tracing 数据和 Performance Events：

   你可以用 Chrome DevTools 的 Performance 面板来分析 trace.json 文件，也可以用代码来分析 PerformanceObserver 打印的性能数据。

第六部分：总结与展望

今天我们聊了 Chrome DevTools Protocol (CDP) 里面的 Tracing 和 Performance Events，以及怎么用它们来做 Custom Metrics。希望通过今天的讲解，大家能够对这些工具有一个更深入的了解，并能够运用它们来优化你的网页性能。

• CDP 是一个强大的工具， 它可以让你控制 Chrome 浏览器的各种行为，包括性能监控。
• Tracing 可以记录网页的每一个细节， 但性能开销较大，适合用来做详细的性能分析。
• Performance Events 更轻量级， 适合用来做实时的性能监控。
• Custom Metrics 可以让你定制你的性能指标， 更好地了解网页的性能。

未来，CDP 和 PerformanceObserver API 还会不断发展，提供更多的功能和更强大的性能监控能力。让我们一起期待吧！

好了，今天的讲座就到这里，谢谢大家！ 如果有问题，欢迎提问，虽然我可能也不知道。

祝大家编程愉快，早日成为性能优化大师！