1 什么是 tracing？

Tracing 是一种收集程序执行过程中事件的技术。它记录了程序运行时发生的事件，如函数调用、I/O 操作、系统调用等。在 Web 开发中，Tracing 通常用于收集浏览器渲染页面时的性能数据，包括 CPU 活动、内存使用情况、网络请求等。

• 用途：通过 Tracing，开发者可以获得详细的性能指标，识别瓶颈所在，进而优化代码。

• 工具：在 Edge DevTools 中，Performance 面板提供了 Tracing 的功能，可以用来记录页面加载、交互等过程中的性能数据。打开 Edge 浏览器，在地址栏输入 edge://tracing，出来的界面如下。Chrome 或者其它浏览器亦可，比如：chrome://tracing。

• 

点击 Load，可以导入 profiler 生成的 JSON 文件。操作：按键盘 w, a, s, d 键，可以对 profiler 的结果进行缩放和移动。

鼠标托选其中一栏后，会显示出如下：

2 Wall Duration（壁钟持续时间）

Wall Duration（有时也称为 wall clock time 或 elapsed time）指的是一个操作从开始到结束所经历的实际时间。这是指从用户的视角来看，完成某项任务所需要的时间，包括了等待时间、CPU 时间以及其他任何影响最终完成时间的因素。

- 测量：Wall Duration 是用户感知性能的重要指标，因为它反映了用户实际等待的时间。- 影响因素：除了 CPU 执行时间外，还包括 I/O 等待、进程调度延迟等。

3 Self Time（自身时间）

Self Time 是指某个特定函数或方法在其内部执行所花费的时间，不包括其子函数或调用其他函数的时间。换句话说，Self Time 反映了直接在这个函数内部执行的操作所花费的时间。

• 用途：Self Time 帮助开发者理解哪个函数本身是最耗时的，这对于定位性能瓶颈很有帮助。

• 区分：与 Total Time（或 Cumulative Time，累计时间）不同，Total Time 包括了函数及其所有子调用的时间。

4 示例解释

假设你在 Edge DevTools 中使用 Performance 面板进行了一次 Tracing，你可能会看到类似下面的数据：

• Tracing：记录了页面加载过程中的所有事件，包括网络请求、JavaScript 执行、布局重绘等。

• Wall Duration：显示了页面从开始加载到完全加载完成所花费的实际时间。

• Self Time：对于每一个函数调用，展示的是该函数自身执行所花费的时间，而不包括它调用的其他函数的执行时间。通过这些信息，你可以更好地理解你的应用在运行时的行为，发现潜在的性能问题，并据此进行优化。

5 如何使用这些信息

当你在 Edge DevTools 中查看性能报告时，可以利用这些信息来：

• 优化代码：通过查看 Self Time 较高的函数，可以找到需要优化的部分。

• 减少延迟：通过关注 Wall Duration，可以尝试减少页面加载时间，提升用户体验。

• 资源管理：通过 Tracing 数据，可以发现哪些资源请求是不必要的，从而减少网络请求，优化资源加载流程。总的来说，Tracing、Wall Duration 和 Self Time 都是帮助开发者理解和改进应用程序性能的关键概念。通过这些工具和技术，开发者能够更深入地了解程序的执行情况，并据此做出优化决策。