通过开发者工具-网络排查响应时间过长的问题

关键词：network 网络 pending 开发者工具

有时候我们会发现某次http请求花费了很长时间，比如会花费十几秒，那么我们可以通过开发者工具的网络和其他一些工具来分析请求时间过长的原因

Dev Tool 中时间线各阶段代表的意义

分别用edge、chorme打开一个网络链接

队列/queueing

在请求能够被发出去前的等等时间。包含了用于处理代理的时间。另外，如果有已经建立好的连接，那么这个时间还包括等待已建立连接被复用的时间，这个遵循Chrome对同一源最大6个TCP连接的规则。

已发送请求/request sent

发起请求的时间，通常小到可以忽略。

正在等待服务器响应/waiting for server response

等待响应的时间，具体来说是等待返回首个字节的时间。包含了与服务器之间一个来回响应的时间和等待首个字节被返回的时间。

内容下载/content download

用于下载响应的时间

通过 netlog-viewer查看chrome://net-export 生成的网络日志文件的输出

• 打开 chrome://net-export/，然后点击 Start Logging to Disk 然后会让你选择一个地方来存储日志文件，好了之后录制也就开始了。
• 去出现问题的页面尝试重现，重现完毕后，回到第一步的那个页面Stop 就可以了。
• 查看日志， 打开这个地址 https://netlog-viewer.appspot.com/#import 然后选择文件，将刚才的日志文件导入。
• 选择 event， 搜索那个出问题的 api， 就可以查看到详细的日志，看看从哪一步开始时间边长的，或者看看有没有 error 之类的日志。

 我的数据中 HTTP_TRANSACTION_READ_HEADERS 花费了最长的时间，[dt=33216] 代表耗时。

我上面的日志显示，我的问题出现在解析返回的响应头上，也就是浏览器等待后端的时间过长，最后通过重启后端程序解决了该问题。这个对应的就是dev tool中的 正在等待服务器响应/waiting for server response

参考：

http请求偶尔处于pending很久排查 | 我们不能失去信仰 (enjoyms.com)

关于请求被挂起页面加载缓慢问题的追查_知识库_博客园 (cnblogs.com)