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 都是帮助开发者理解和改进应用程序性能的关键概念。通过这些工具和技术，开发者能够更深入地了解程序的执行情况，并据此做出优化决策。