Network Resource Timing 我的请求慢在哪

Sunxb 发布于2019-08-26 11:57 / 360人阅读

摘要：可优化部分请求已被暂停，以等待将要释放的不可用套接字。合并小文件减少请求。请求被暂停，上，浏览器仅允许每个源拥有六个连接。主要是对服务器的保护。中的所有原因加上代理协商所用的任何时间。等待初始响应所用的时间，也称为至第一字节的时间。

前言

如果我们发现自己页面加载慢，通常会打开DevTools的Network栏找到具体的慢的请求，那他到底慢在哪呢？

Timing包含的内容

Queuing

Stalled/Blocking

Proxy Negotiation

DNS Lookup

Initial Connection / Connecting

SSL

Request Sent / Sending

Waiting (TTFB)

Content Download / Downloading

1、Queuing

主要是资源加载的排队

不可优化部分

请求被渲染引擎推迟，如脚本/样式会优先，图片推迟。

生成磁盘缓存条目所用的时间（通常非常迅速）。

可优化部分

请求已被暂停，以等待将要释放的不可用TCP套接字。

浏览器线程池不是无限的，需要等待socket(TCP)释放。

合并小文件减少请求。

请求被暂停，HTTP 1上，浏览器仅允许每个源拥有六个TCP连接。

主要是对服务器的保护。

可以把资源放到不同的域名上，参考`域名发散`。

2、Stalled/Blocking

请求等待发送所用的时间。Queuing中的所有原因加上代理协商所用的任何时间。

不可优化部分

Queuing中不可优化部分

代理协商

可优化部分

Queuing中可优化部分

相同的N次请求缓存锁，一般资源加载不会加载相同的，但ajax有可能，加timestamp可解决。

注意1：

Stalled是Queuing之后的下一个状态，Stalled开始时已经出队，他们太显著的差别（是否使用proxy/ssl），他们之间没有and/or/parent/child的关系，有建议将queueing/stalled改名为postponed/awaiting socket，具体可以看看chromium issue。

注意2：

另外，同源链接复用可能引发这样的问题，由于之前存在可用链接，此时浏览器希望重用之前的连接以节省资源，用之前的一个socket去发起连接，后收到服务器返回的链接已重置/不存在，再从原本可用链接中找可用链接，引发长时间等待，具体可以看看 chrome-stalled-problem-resolving-process

3、Proxy Negotiation

与代理服务器连接协商所用的时间。

主要是浏览器通过代理服务器去服务目标服务，如本地代理Fiddler，一般无法优化。

4、DNS Lookup

DNS查询所用的时间

可优化部分

不要有太多的新域名（可能递归查询绕地球一圈），参考域名收敛。

减少DNS解析路径（如果内部有很多DNS服务器解析）。

5、Initial Connection / Connecting

建立连接所用的时间，包括TCP 握手/重试和协商 SSL的时间。

6、SSL

完成SSL握手所用的时间。

可优化部分

需要区分好什么资源需要https，什么需要http。

7、Request Sent / Sending

发出网络请求所用的时间。通常不到一毫秒。

8、Waiting (TTFB)

等待初始响应所用的时间，也称为至第一字节的时间。

可优化部分

* 服务器响应速度

* 服务器网络带宽

9、Content Download / Downloading

接收响应数据所用的时间。

可优化部分

* 服务器网络带宽

* 单个文件大小

其他

大佬们总说要写文章，第一次写文章，就搬运了一下都感觉好难哦。

有不对的地方欢迎大佬们指出。

参考

Understanding Resource Timing
Chrome Cache Lock
Chromium Issues 476749
chrome-stalled-problem-resolving-process

GPU云服务器云服务器 Timing Resource oracle resource network

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107890.html

Network Resource Timing 我的请求慢在哪

摘要：可优化部分请求已被暂停，以等待将要释放的不可用套接字。合并小文件减少请求。请求被暂停，上，浏览器仅允许每个源拥有六个连接。主要是对服务器的保护。中的所有原因加上代理协商所用的任何时间。等待初始响应所用的时间，也称为至第一字节的时间。前言如果我们发现自己页面加载慢，通常会打开DevTools的Network栏找到具体的慢的请求，那他到底慢在哪呢？ Timing包含的内容 showIm...

PumpkinDylan 2019-08-02 10:35 评论0 收藏0
使用性能API快速分析web前端性能

摘要：性能时间线以一个统一的接口获取由和所收集的性能数据。浏览器支持下表列举了当前主流浏览器对性能的支持，其中标注星号的内容并非来自于性能工作小组。页面的性能问题一直是产品开发过程中的重要一环，很多公司也一直在使用各种方式监控产品的页面性能。从控制台工具、Fiddler抓包工具，到使用DOMContentLoaded和document.onreadystatechange这种侵入式java...

mj 2019-08-21 10:48 评论0 收藏0
HTML5 Performance

摘要：获取一组当前页面已经加载的资源对象。为时，表示资源的路径。超出时，清空所有为的资源数据。为的资源数量超出设置值的时候会触发该事件。自定义计时接口创建一个保存在资源缓存数据中，可通过等相关接口获取。返回一个包含对象所有属性的对象。简介 performance是html5的新特性之一，通过它，页面的开发者们可以非常精确的统计到自己页面的表现情况，从而有针对性的进行优化，提升用户体验。下...

testbird 2019-08-21 17:23 评论0 收藏0
聊一聊前端的监控

摘要：今天我们来聊聊前端的监控我们为什么需要前端监控为了获取用户行为以及跟踪产品在用户端的使用情况，并以监控数据为基础，指明产品优化方向前端监控分为三类性能项目数据监控异常监控性能监控衡量前端的性能的指标是时间那么如何监测时间呢，浏览器给我们提今天我们来聊聊前端的监控我们为什么需要前端监控？为了获取用户行为以及跟踪产品在用户端的使用情况，并以监控数据为基础，指明产品优化方向前端监控...

Pikachu 2019-08-23 15:16 评论0 收藏0