摘要:可优化部分请求已被暂停,以等待将要释放的不可用套接字。合并小文件减少请求。请求被暂停,上,浏览器仅允许每个源拥有六个连接。主要是对服务器的保护。中的所有原因加上代理协商所用的任何时间。等待初始响应所用的时间,也称为至第一字节的时间。
前言
如果我们发现自己页面加载慢,通常会打开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-process3、Proxy Negotiation
与代理服务器连接协商所用的时间。
主要是浏览器通过代理服务器去服务目标服务,如本地代理Fiddler,一般无法优化。
4、DNS LookupDNS查询所用的时间
可优化部分
不要有太多的新域名(可能递归查询绕地球一圈),参考域名收敛。
减少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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/52447.html
摘要:可优化部分请求已被暂停,以等待将要释放的不可用套接字。合并小文件减少请求。请求被暂停,上,浏览器仅允许每个源拥有六个连接。主要是对服务器的保护。中的所有原因加上代理协商所用的任何时间。等待初始响应所用的时间,也称为至第一字节的时间。 前言 如果我们发现自己页面加载慢,通常会打开DevTools的Network栏找到具体的慢的请求,那他到底慢在哪呢? Timing包含的内容 showIm...
摘要:性能时间线以一个统一的接口获取由和所收集的性能数据。浏览器支持下表列举了当前主流浏览器对性能的支持,其中标注星号的内容并非来自于性能工作小组。 页面的性能问题一直是产品开发过程中的重要一环,很多公司也一直在使用各种方式监控产品的页面性能。从控制台工具、Fiddler抓包工具,到使用DOMContentLoaded和document.onreadystatechange这种侵入式java...
摘要:获取一组当前页面已经加载的资源对象。为时,表示资源的路径。超出时,清空所有为的资源数据。为的资源数量超出设置值的时候会触发该事件。自定义计时接口创建一个保存在资源缓存数据中,可通过等相关接口获取。返回一个包含对象所有属性的对象。 简介 performance是html5的新特性之一,通过它,页面的开发者们可以非常精确的统计到自己页面的表现情况,从而有针对性的进行优化,提升用户体验。 下...
阅读 2418·2021-11-11 11:01
阅读 3288·2021-10-11 10:57
阅读 2647·2021-09-30 09:46
阅读 3493·2021-07-26 23:38
阅读 1565·2019-08-29 12:22
阅读 652·2019-08-29 11:28
阅读 2353·2019-08-26 14:04
阅读 3052·2019-08-23 18:34