龙空技术网

Chrome DevTools小知识之 Timing

孤舟御海 176

前言:

此时兄弟们对“ajax请求可以延时吗”大概比较关心,小伙伴们都想要分析一些“ajax请求可以延时吗”的相关知识。那么小编也在网摘上收集了一些有关“ajax请求可以延时吗””的相关文章,希望咱们能喜欢,朋友们快快来了解一下吧!

在Chrome浏览器DevTools(F12)的NetWork页签下,访问某个网站的时候会把所有的请求显示出来,点击某个请求就会出来上图所示的一个面板,本文主要是Timing相关的一些内容。下面是图片显示内容的一些解释及程序开发时可能的优化时间办法。

Queued at 990.27ms:表示该请求加入到请求队列中的时刻。

Started at 1.00s:表示请求开始处理的时刻。

Queueing:表示请求从加入到请求队列中排队花费的时间。原因可能由于该请求被渲染引擎认为是优先级比较低的资源、服务器不可用、 超过浏览器的并发请求的最大连接数(Chrome的最大并发连接数为6),

优化办法: 1、减少HTTP请求,使用CSS雪碧图、内联图片(不宜使用过大的图片)、合并js文件和css文件表等。 2、异步请求,减少阻塞。

Stalled:请求在可以被发送出去之前的等待时间(阻塞时间),一般是等待可复用的TCP连接释放的时间。浏览器对于单个域名只能同时建立4~6个TCP连接(不同浏览器实现有差异)。

优化办法:可以将一些资源分放到多台主机上,增大并发数。

Proxy Negotiation:浏览器和代理服务器连接的协商时间。

DNS Lookup:域名解析花费的时间。

优化办法:可以缓存DNS。

Initial Connection:建立TCP连接花费的的时间,包括TCP握手/重试和协商SSL(包含SSL时间)。

优化办法:使用长连接,复用已有连接。

SSL:花费在完成SSL上的时间。

Request sent:发送请求花费的时间。时间通常很短,大多数情况不会超过1毫秒(取决于网络带宽等因素),基本不需要优化。

Waiting (TTFB):从发出请求到接收到响应第一个字节经过的时间,包括网络延迟时间。

优化办法:1、可以使用CDN,将用户的访问指向距离最近的工作正常的缓存服务器上,如果这个时间花费比较长,就应该考虑对网络进行性能优化了。2、如果是ajax请求,重点可能就是代码层面的优化了。

Content Download:从接收响应到响应接收完成花费的时间。

优化办法:1、可以考虑针对部分内容进行压缩,如js文件压缩(jquery.js换成jquery.min.js)、gzip等,减少响应数据大小。2、对于变化不频繁的资源可以采用If-Modified-Since和Last-Modified等,让服务器会返回304,不返回响应数据。

标签: #ajax请求可以延时吗