前缀：基于极客时间-李兵《浏览器工作原理与实践》记录

简单来说，Chrome 开发者工具为我们提供了通过界面访问或者编辑 DOM 和 CSSOM 的能力，还提供了强大的调试功能和查看性能指标的能力。

• 红色圆点的按钮，表示“开始 / 暂停抓包”，这个功能很常见，很容易理解。
• “全局搜索”按钮，这个功能就非常重要了，可以在所有下载资源中搜索相关内容，还可以快速定位到某几个你想要的文件上。
• Disable cache，即“禁止从 Cache 中加载资源”的功能，它在调试 Web 应用的时候非常有用，因为开启了 Cache 会影响到网络性能测试的结果。
• Online 按钮，是“模拟 2G/3G”功能，它可以限制带宽，模拟弱网情况下页面的展现情况，然后你就可以根据实际展示情况来动态调整策略，以便让 Web 应用更加适用于这些弱网。

过滤器：主要就是起过滤功能。因为有时候一个页面有太多内容在详细列表区域中展示了，而你可能只想查看 JavaScript 文件或者 CSS 文件，这时候就可以通过过滤器模块来筛选你想要的文件类型。（如果没找到，点一下控制器最右边的工具图标即可显示）

抓图信息：可以用来分析用户等待页面加载时间内所看到的内容，分析用户实际的体验情况。比如，如果页面加载 1 秒多之后屏幕截图还是白屏状态，这时候就需要分析是网络还是代码的问题了。（勾选《过滤器》上的“Capture screenshots”即可启用屏幕截图。）

下载信息概要：重点关注下 DOMContentLoaded 和 Load 两个事件，以及这两个事件的完成时间

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

详细列表：这个区域是最重要的，它详细记录了每个资源从发起请求到完成请求这中间所有过程的状态，以及最终请求完成的数据信息。通过该列表，你就能很容易地去诊断一些网络问题。

选中详细列表中的一项，就会在右边显示对应详细信息

资源的时间信息：

• Queuing：排队等待的时长，页面资源都会优先级，css/html/javascript中核心会优先，而图片、视频、音频非核心资源，优先级会比较低，某些css/javascript的这个时间可能也会比较长。
• Stalled：发起下载连接之前，可能因某些原因导致推迟
• Initial connection/SSL：也就是和服务器建立连接的阶段，这包括了建立 TCP 连接所花费的时间；
• Request sent：个阶段非常快，因为只需要把浏览器缓冲区的数据发送出去就结束了，并不需要判断服务器是否接收到了
• TTFB/ Content Download：等待接收服务器第一个字节的数据，这是反映服务端响应速度的重要指标，对服务器来说，TTFB 时间越短，说明服务器响应越快。接收到第一个字节之后，进入陆续接收完整数据的阶段，也就是 Content Download 阶段，这意味着从第一字节时间到接收到全部响应数据所用的时间

优化重点：Queuing、TTFB/ Content Download

• Queuing时间过长：是因为浏览器对每个域名最多只保持6个tcp连接（可简单理解为同一时间只能下载几个文件），超量的文件，只能等待前面的下载完了，才能再下载，可使用《域名分片》方法，即使用不同的域名加载js、css，就能增加下载的宽度，另外可升级到《HTTP2》，因为http2已经没有6个tcp连接的限制。
• TTFB/ Content Download时间长：《服务端生成页面数据的时间过久》需要在服务端做优化了，如各种缓存的技术；《网络原因》增加宽带或用CDN缓存静态文件减少资源下载；《发送请求头时带上了多余的用户信息》去除不必要的Cookie信息