Network 面板中的时间线面板 - 图1

上图面板中各项的含义：

  • Queueing: 排队用了多长时间。
    当浏览器发起一个请求时，会有很多原因导致请求不能被立即执行，而是需要排队等待。
    导致请求排队的原因：
  1. 页面资源的优先级，比如 html, css, js 是页面中核心资源，优先级最高；图片、音视频等非核心资源，优先级就比较低。后者遇到前者时，就需要“让路”，进入排队状态。
  2. 浏览器会为每个域名最多维护 6 个 TCP 连接，如果发起一个请求，6 个都处于忙碌状态，那么该请求就处于排队状态。
  3. 网络进程在为数据分配磁盘空间时，新的 HTTP 请求也需要短暂的等待磁盘分配结束。
  • Stalled: 停滞用了多长时间。
    排队完成后，就要进入发起连接的状态。在发起连接前，还有一些原因可能导致连接过程被推迟。推迟的这段时间就是停滞时间。
  • Proxy Negotitation: 代理服务器连接协商所用的时间。
    若没有用代理服务器则不展示。
  • Initial connection: 和服务器建立连接所用的时间，包括建立 TCP 连接花费的时间。
  • SSL：如果使用了 HTTPS，会多一个 SSL 的握手时间，此过程主要用来协商一些加密信息。
  • Request sent：把请求数据发送给服务器所用时间。
    和服务器建立好连接后，网络进程会准备请求数据，并将其发给服务器；只需要将浏览器缓冲区的数据发出去就结束了，并不需要判断服务器是否接收，所以非常快，通常不到 1ms.
  • Waiting (TTFB)：Waiting Time To First Byte，等待接收到服务器 “第一字节时间”。TTFB 是反映服务端响应速度的重要指标，越短说明服务器响应越快。
  • Content Download：从第一字节时间到接收到全部响应数据所用的时间。

优化时间线上耗时项

  • 优化 Queueing 时间过久
  1. 将一个站点下的资源放在多个域名下面，避免一个请求只能建立 6 个 TCP 连接。（域名分片技术）
  2. 升级到 HTTP2，没有 TCP 连接数的限制。
  • Waiting TTFB 时间过久
    原因如下:
  1. 服务器生成页面数据的时间过久。
    服务器打开一个页面请求时会从数据库读取页面所需数据 -> 将数据传入模板 -> 模板渲染 -> 返回给用户。
    可以通过增加各种缓存技术来提高服务器处理速度。
  2. 网络原因。
    使用了低带宽的服务器，或者用的是电信服务器，访问的确实联通的用户。
    可以使用 CDN 来缓存一些静态文件。
  3. 发送请求头时带上了多余的用户信息。
    一些不必要的 cookie 信息，服务器会每项都处理，加大处理时长。
    发送请求时尽可能的减少不必要的 Cookie 信息。
  • Content Download 时间过久
    若单个请求 Content Download 花费大量时间，可能是字节数太多的原因导致的。
    可以减少文件大小，压缩、去掉注释等方法。