使用 Perfetto 观察 Chrome 内核工作过程

作者：杨辰

2025-06-17
北京
本文字数：1789 字
阅读完需：约 6 分钟

像 Chrome 内核这种 UI 类程序，使用 debug 工具断点调试很多时候并不合适，因为随着用户操作，系统可能产生一系列事件（比如随意操作拖动一下鼠标就会产生大量的 mousemove 事件），并且其中很多事件并不是我们需要观察的，使用断点很难精准定位和观察到我们要分析的代码。

Chrome 内部建立了一套 trace 系统，通过 Perfetto 可以观察到 Chrome 内核工作过程，使用方式和 Chrome DevTools 中的 Performnace 工具很相似，它们都是以火焰图的方式来展示一次次任务的执行过程。

如何使用 Perfetto 记录 Chrome 的 trace，官方文档有详细的介绍 https://perfetto.dev/docs/quickstart/chrome-tracing，这里不再赘述。

只不过每次使用 Perfetto 记录的 trace 都包含了所有页面还有浏览器的各种进程和线程，开发者会瞬间被大量的 track 和 event 淹没，这里简单介绍一下：

如何快速找到目标进程和线程
如何快速定位到自己要观察的那一段时间区间里，Chrome 内核的工作过程

如何快速找到目标进程和线程

需要先了解一下 Chrome 的多进程架构。

在 Chrome 的三个点菜单里，找到「任务管理器」并打开。

根据标题来找到对应的页面，在「进程 ID」这一列找到对应的进程 ID。从这里可以看到，当你要观测某个页面里内核的运行过程时，虽好把无关紧要的 tab 页都关闭，这样进程更好找一些，记录的 trace 也更小一些）

通过上面的方法找到的就是页面对应的 renderer 进程，在 Perfetto 中通过进程 id 可以定位到目标进程。

展开这个进程，里面的 CrRendererMain 就是我们常说的主线程，它是我们主要会去观察的线程。

如何快速定位到我们要观察的代码执行过程

从上面的截图中可以看到有很多密密麻麻的竖线，这些竖线就是每次执行任务时的调用栈。其中往往只有一小部分调用栈是我们要分析的，手动一个个去找是非常困难的。

我们可以这样在 Chrome trace 配置里，将 blink.user_timing 勾选上，这样通过 performance.mark 添加的标记就可以在 trace 中看到了。

但是从大量的调用栈中，找到 performance.mark 的标记依然不容易。我们需要使用 Perfetto 的 debug tracks 功能来将 performance.mark 标记「高亮」出来。

点击左侧菜单的「Query」，并输入以下 sql 来查询 performance.mark 标记

INCLUDE PERFETTO MODULE viz.slices;
SELECT    _viz_slices_for_ui_table_0.id AS id,    _viz_slices_for_ui_table_0.ts AS ts,    _viz_slices_for_ui_table_0.dur AS dur,    _viz_slices_for_ui_table_0.category AS category,    _viz_slices_for_ui_table_0.name AS name,    _viz_slices_for_ui_table_0.utid AS utid,    thread_1.tid AS thread__utid____tid,    thread_1.name AS thread__utid____name,    _viz_slices_for_ui_table_0.upid AS upid,    process_2.pid AS process__upid____pid,    process_2.name AS process__upid____name,    _viz_slices_for_ui_table_0.parent_id AS parent_idFROM    _viz_slices_for_ui_table AS _viz_slices_for_ui_table_0    LEFT JOIN thread AS thread_1 ON thread_1.id = _viz_slices_for_ui_table_0.utid    LEFT JOIN process AS process_2 ON process_2.id = _viz_slices_for_ui_table_0.upidWHERE    _viz_slices_for_ui_table_0.category = 'blink.user_timing'    and _viz_slices_for_ui_table_0.name = 'xxxx'; -- 这里填写实际要查询的 mark，这里也可以用 like 来模糊匹配