网络选项卡上的这些数字是什么意思？

Question

在网络选项卡中，在所有 HTTP 请求的列表下，我看到了一个摘要。例如：

• 213 请求
• 已传输 2.5 MB
• 7.2 MB 资源
• 完成时间：2.1 分钟
• DOMContentLoaded：1.23 秒
• 负载：3.17 秒

Chrome 的文档中有一篇关于此选项卡的详尽文章，但并未描述这些摘要数据。

其中一些是不言自明的。总共发送了 213 个 HTTP 请求，从第一个请求到document.DOMContentLoaded触发事件用了 1.23 秒。完成值的大值实际上是有道理的，因为此页面具有用于点击跟踪的重复“ping”事件。但是，其他值有点令人困惑。

为什么传输和资源有两个非常不同的数字——即传输字节和资源字节之间有什么区别？另外，“加载”时间究竟代表什么——是window.load事件发生之前的时间还是其他什么？

Answer 1

DevTools 文档指向MDN 的load事件页面来描述“Load”编号。所以是的，“Load”是从导航到 window.load 的时间。

“传输”是指通过线路传输的字节。“资源”是指这些文件下载并解压缩后的重量，如DevTools 参考中所示。

从 CDN下载jQuery就说明了其中的差异。DevTools参考指出请求表中较小的数字代表压缩大小。