“使用大请求行”来显示两个值!

如果你没有看到第二个值(内容)，你需要点击“使用大请求行”按钮在Chrome网络选项卡:

我找到这个答案要感谢这个问题的答案:

Chrome开发工具-大小和内容在哪里?

简单来说谷歌文章解释为 大小=传输大小和内容=实际大小

这是我在阅读关于这个主题的各种文章的基础上得出的公式(我愿意根据你的评论进一步改进它) 大小=压缩(内容)+响应头

参见本文中使用的图像

谷歌解释

“Size”是连接上的字节数，“content”是资源的实际大小。有很多事情可以让他们有所不同，包括:

从缓存中提供服务(小或0 "size") 响应头，包括cookie(“大小”大于“内容”) 重定向或验证请求 Gzip压缩(通常“大小”小于“内容”)

从文档中可以看出:

大小是响应头的组合大小(通常是几个) 100字节)加上由服务器传递的响应体。 内容是资源的解码内容的大小。如果资源 是从浏览器的缓存而不是通过网络加载的，这是吗 字段将包含文本(来自缓存)。

大小是响应本身的大小，内容是您正在访问的资源的大小。

比较:

空的缓存:

GET 200 OK ..大小:31.72KB内容:31.42KB

缓存:

GET 304未修改..大小:146B内容:31.42KB

“使用大请求行”来显示两个值!

如果你没有看到第二个值(内容)，你需要点击“使用大请求行”按钮在Chrome网络选项卡:

我找到这个答案要感谢这个问题的答案:

Chrome开发工具-大小和内容在哪里?

大小包括响应和请求信息

大小是以下数的和:

为请求头传输的字节数 为响应头传输的字节数 为响应体传输的字节数

从文档中可以看出:

检查单个资源的属性，比如它的HTTP头(注意复数，强调我的)、内容、大小等等。

如果你比较performanceEntry的transferSize(例如https://stackoverflow.com/的主文档)和Chrome DevTools的Network选项卡中的Size，你会发现两者不匹配。这是因为performanceEntry不包含请求头的大小。

Network选项卡和记录的性能条目的屏幕截图