javascript - 如何避免 Chrome 跟踪事件重叠

Question

我们以 trace ui 格式生成日志记录事件，很少有 complete events相互重叠。它们不会出现在不同的行中。 我怎样才能避免这种重叠？示例跟踪是

{
"traceEvents": [
{ "pid":1, "tid":1, "ts":87705, "dur":956189, "ph":"X", "name":"Jambase", "args":{ "ms":956.2 } },
{ "pid":1, "tid":1, "ts":87755, "dur":956189, "ph":"X", "name":"Jambase2", "args":{ "ms":956.2 } },
{ "pid":1, "tid":1, "ts":128154, "dur":75867, "ph":"X", "name":"SyncTargets", "args":{ "ms":75.9 } },
{ "pid":1, "tid":1, "ts":546867, "dur":121564, "ph":"X", "name":"DoThings", "args":{ "ms":121.6 } }
],
"meta_user": "aras",
"meta_cpu_count": "8"
}

下面是上述跟踪的屏幕截图，其中 2 个完整事件相互重叠。

Answer 1

我认为 chrome://tracing 无法避免这种重叠。在您的示例中，所有数据都属于同一个线程。一个线程不能同时处理多个任务。你可以在生成json时改变重叠元素的tid，让它们分行显示。

我曾经写过一个脚本来满足这个需求。假设ts是递增的顺序，N是最大重叠层数。以下伪代码显示了如何更改重叠元素的 tid。

n_start = [0] * N
for element in traceEvents:
    for i in range(N):
        if n_start[i] < element['ts']:
            n_start[i] += element['ts'] + element['dur']
            element['tid'] += i
            break