chrome保存请求记录与请求耗时分析

Posted 2021-02-16

当我们访问某个页面，想要查看页面的请求记录 大多数情况下是可以看到的，但譬如在页面进行数据提交(登陆等)或者打开某页面而页面又进行了重定向，这样会因为页面的刷新而导致我们看不到任何请求记录；
谷歌浏览器提供了一个很不错的选项:

原始访问的是index.php此时我打开了preserver Log然后点了一个A标签跳转到了a.php可以看到network里面也保留了index.php的访问记录

当一个页面访问非常耗时的时候 我们通常需要排查到底是在哪一步花费了大量时间可以通过
chrome://net-internals/#events 页面来捕获事件日志

先搜索我们的访问地址 如果链接过多可以点击右侧的小三角 然后选择reset重新统计
选中Source Type为 URL_REQUEST的那个 这时候右侧会出现所有的请求流程
流程日志总体分为三列
第一列t=X 为时间线，自请求发起时算
第二列st=Y 每步操作所逝去的时间，并且会累积前面的时间
第三列[dt=Z] 为具体的事件，以及相应事件的耗时dt，此耗时为绝对耗时。+号对应事件开始，-号对应事件结束，也就是说他们必然成对出现。住里是展开后更加详细的子事件。直到不能再细分。
以下面的为例

t=5623 [st= 8]     +HTTP_STREAM_REQUEST  [dt=2]
t=5623 [st= 8]        HTTP_STREAM_JOB_CONTROLLER_BOUND
                      --> source_dependency = 101387 (HTTP_STREAM_JOB_CONTROLLER)
t=5625 [st=10]        HTTP_STREAM_REQUEST_BOUND_TO_JOB
                      --> source_dependency = 101388 (HTTP_STREAM_JOB)
t=5625 [st=10]     -HTTP_STREAM_REQUEST

事件HTTP_STREAM_REQUEST的开始时间是5623毫秒[t=5623] 耗时2毫秒[dt=2]，当前总请求已耗时8毫秒[st=8]
备注: 1秒=1000毫秒 1毫秒=1000微秒 1微秒=1000纳秒
图一的总耗时约为37毫秒
再看图二的第一行

t=5615 [st= 0] +REQUEST_ALIVE  [dt=35]

或者最后一行

t=5650 [st=35] -REQUEST_ALIVE

总耗时35毫秒 有2毫秒的大概差距 不清楚为什么

如果排查问题原因 可以去看具体事件的耗时 然后再具体分析