21 | Chrome开发者工具：利用网络面板做性能分析

Chrome 开发者工具

网络面板

1. 控制器

2. 过滤器
3. 抓图信息
4. 时间线
5. 详细列表
6. 下载信息概要

• DOMContentLoaded，这个事件发生后，说明页面已经构建好 DOM 了，这意味着构建 DOM 所需要的 HTML 文件、JavaScript 文件、CSS 文件都已经下载完成了
• Load，说明浏览器已经加载了所有的资源（图像、样式表等）

  网络面板中的详细列表

1. 列表的属性
   
   2. 详细信息
   
   3. 单个资源的时间线
   
   Queuing（排队）
   也就是排队的意思，当浏览器发起一个请求的时候，会有很多原因导致该请求不能被立即执行，而是需要排队等待，导致请求排队的原因主要有：

• 页面中的资源是有优先级的：比如 CSS、HTML、JavaScript 等都是页面中的核心文件，所以优先级最高；而图片、视频、音频这类资源就不是核心资源，优先级就比较低
• 等待TCP队列：浏览器会为每个域名最多维护 6 个 TCP 连接，如果发起一个 HTTP 请求时，这 6 个 TCP 连接都处于忙碌状态，那么这个请求就会处于排队状态
• 网络进程在为数据分配磁盘空间时，新的 HTTP 请求也需要短暂地等待磁盘分配结束。

Stalled（停滞）
有一些原因可能导致连接过程被推迟

Proxy Negotiation（代理协商阶段）
如果你使用了代理服务器，它表示代理服务器连接协商所用的时间

Initial connection/SSL （服务器建立连接的阶段）
包括了建立 TCP 连接所花费的时间；不过如果你使用了 HTTPS 协议，那么还需要一个额外的 SSL 握手时间，这个过程主要是用来协商一些加密信息的。

Request sent 阶段
服务器建立好连接之后，网络进程会准备请求数据，并将其发送给网络，通常这个阶段非常快，因为只需要把浏览器缓冲区的数据发送出去就结束了，并不需要判断服务器是否接收到了，所以这个时间通常不到 1 毫秒。

Waiting（TTFB）（第一字节时间）
数据发送出去了，接下来就是等待接收服务器第一个字节的数据，TTFB 是反映服务端响应速度的重要指标，对服务器来说，TTFB 时间越短，就说明服务器响应越快

Content Download 阶段
从第一字节时间到接收到全部响应数据所用的时间

优化时间线上耗时项

1. 排队（Queuing）时间过久

• 域名分片：浏览器为每个域名最多维护 6 个连接，基于这个原因，你就可以让 1 个站点下面的资源放在多个域名下面，比如放到 3 个域名下面，这样就可以同时支持 18 个连接了
• 把站点升级到 HTTP2：HTTP2 已经没有每个域名最多维护 6 个 TCP 连接的限制了

2. 第一字节时间（TTFB）时间过久

• 服务器生成页面数据的时间过久
• 网络的原因
• 发送请求头时带上了多余的用户信息

3. Content Download 时间过久
如果单个请求的 Content Download 花费了大量时间，有可能是字节数太多的原因导致的。这时候你就需要减少文件大小，比如压缩、去掉源码中不必要的注释等方法。

22 | DOM树：JavaScript是如何影响DOM树构建的？

什么是 DOM