前言如果我们发现自己的页面加载慢了,我们通常会打开DevTools的Network栏来查找具体慢的请求,那么到底是哪里慢了呢?TimingQueuingStalled/BlockingProxyNegotiationDNSLookupInitialConnection/ConnectingSSLRequestSent/SendingWaiting(TTFB)ContentDownload/Downloading1、Queuing主要是资源加载的排队,无法优化。请求被渲染引擎推迟,比??如脚本/样式会被优先处理,图像会被延迟。生成磁盘缓存条目所花费的时间(通常非常快)。请求的可优化部分已暂停,等待释放不可用的TCP套接字。浏览器线程池不是无限的,需要等待socket(TCP)释放。合并小文件以减少请求。请求被挂起,并且在HTTP1上,浏览器只允许每个来源有六个TCP连接。主要用于服务器保护。资源可以放在不同的域名上,参考`域名分歧`。2.等待Stalled/Blocking请求发送所花费的时间。排队中的所有原因加上在代理协商中花费的任何时间。Queuing的不可优化部分,代理协商的不可优化部分,Queuing的可优化部分,同样的N次请求缓存锁,一般资源加载不会加载一样,但是ajax是可以的,加上timestamp可以解决它。注1:Stalled是Queuing之后的下一个状态。Stalled一开始就已经出队了。它们之间存在显着差异(是否使用代理/ssl)。它们之间没有和/或/父/子关系。建议将queuing/stalled改名为postended/waitingsocket,详见chromiumissue。注2:另外,同源链接的复用可能会导致此类问题。由于之前有可用的链接,浏览器希望重用??之前的连接来节省资源。它使用之前的socket发起连接,然后接收服务器返回的response。链接已重置/不存在,从原来的可用链接中寻找可用链接,造成长时间等待。详见chrome-stalled-problem-resolving-process3,ProxyNegotiation与代理服务器协商的时间。主要原因是浏览器通过代理服务器来服务目标服务,比如本地代理Fiddler,一般无法优化。4、可以优化DNSLookupDNS查询所用的时间。新域名不要太多(可能全球递归查询),参考域名收敛。减少DNS解析路径(如果有很多内部DNS服务器解析)。5.InitialConnection/Connecting建立连接所花费的时间,包括TCP握手/重试和SSL协商的时间。6.SSL完成SSL握手的时间。可以优化的部分需要区分哪些资源需要https,哪些需要http。7.RequestSent/Sending发送网络请求所花费的时间。通常小于一毫秒。8.Waiting(TTFB)等待初始响应所花费的时间,也称为第一个字节的时间。部分可优化*服务器响应速度*服务器网络带宽9、ContentDownload/Downloading接收响应数据所花费的时间。可优化部分*服务器网络带宽*单个文件大小其他大佬总说要写文章。第一次写文章,背的很吃力。如果有不对的地方,欢迎大家指出。参考UnderstandingResourceTimingChromeCacheLockChromiumIssues476749chrome-stalled-problem-resolving-process
