怎么把chrome的调试面板调小一点 ChromeDevTools小知识之Timing

在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，不返回响应数据。