Chrome开发工具"大小"与“Content"

当在Chrome的开发工具的Network选项卡中查看样式表信息时，有一列同时指定了“大小”和“内容”:

dev tools的截图，大小/内容列突出显示

有人能说明这两个数字的区别吗?在一些页面上，数字很接近，而在另一些页面上，数字相差很大。

97531 次浏览
小开

Size是响应本身的大小，而Content是你正在访问的资源的大小。

比较:

空的缓存:

main.js GET 200 OK .. Size: 31.72KB Content: 31.42KB

缓存:

main.js GET 304 Not modified .. Size: 146B Content: 31.42KB

小开
最佳答案

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

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

来自文档:

Size是响应头的组合大小(通常是几个) 100字节)加上由服务器传递的响应体。 内容是资源的解码内容的大小。如果资源 是从浏览器的缓存而不是通过网络加载的，这是吗 字段将包含文本(来自缓存)
小开
简单来说，谷歌文章解释为 大小=传输大小和内容=实际大小 enter image description here < / p >

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

参见本文中使用的图片

谷歌解释

小开

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

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

enter image description here

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

Chrome Devs tools- where's大小和内容?< / >

小开

Size包含响应和请求信息

Size是以下数的和:

  1. 为请求头传输的字节数
  2. 为响应头传输的字节数
  3. 为响应体传输的字节数

来自文档:

检查单个资源的属性，比如它的HTTP报头[注意复数，强调mine]，内容，大小，等等。

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

网络选项卡和记录性能条目的截图


提交答案