Chrome开发者工具 - "大小" vs "内容"

Question

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

有人可以解释一下这两个数字之间的差异吗？在某些页面上，这两个数字接近，而在其他页面上它们之间的差距相当大。

- Mike

---

根据文档，当前默认情况下，“请求表显示具有小行的资源；单击”使用大请求行“按钮可增加每行的大小”。这也将在尺寸列中显示内容。 - Vadzim

Answer 1

"Size（大小）" 是指在传输过程中的字节数，而 "content（内容）" 是资源实际大小。有很多因素会导致它们不同，包括：

• 从缓存中提供服务（小或 0 的 "size"）
• 响应头，包括 cookies（"size" 大于 "content"）
• 重定向或身份验证请求
• gzip 压缩（通常是 "size" 小于 "content"）

来自文档：

大小是响应头的总大小（通常为几百字节）加上服务器传回的响应主体的大小。内容是该资源解码后的大小。如果该资源是从浏览器缓存中加载而不是通过网络加载，则此字段将包含缓存中的文本。

- Mark Brackett

---

@NiCkNewman 是的，Size是数据在网络传输中的实际大小（不是带宽）。Content是解压缩后的内容大小（例如如果使用gzip压缩），仅包括内容本身（不包括头部！）。 - Israel

请问我们在这里使用的是1000 KB等于1 MB，还是1024 KB等于1 MB？ - Buttle Butkus

@ButtleButkus：Chrome、Firefox和IE/Edge都使用过时的JEDEC格式，其中1千字节等于1024字节，并写作KB。如果它们以ISO格式（基数10）报告或将其写作KiB/MiB，则会更好。 - okdewit

我正在Mac上使用Chrome版本60.0.3112.113（官方版本）（64位），刚刚遇到了同样的问题。这个问题中的截图是我能够确定灰色和黑色数字之间差异的唯一方法。我正在使用的Chrome当前版本似乎没有显示子标题“内容”。该列只显示“大小”。在文档或Chrome中是否有解释灰色数字是“内容”的地方？我无法找到它。 - flyingL123

请注意，在新版本的Chrome中，默认情况下不会显示灰色数字，您需要在“视图”顶部的“使用大请求行”按钮上单击。 - Snekse

Answer 2

Size代表响应本身的大小，而Content则表示您正在访问的资源的大小。

对比：

空缓存：

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

已缓存：

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

- c69

---

您可能指的是"Size是响应本身的大小[...]"（在HTTP术语中，“resource”也有不同的含义）。 - Bruno

@Bruno所说的。这个答案是错误的，不应该被接受。 - mhenry1384

是的，这听起来很疯狂：一个32K的请求？ - iconoclast

哇塞，你有一年的时间来编辑我的答案。只是一个简单的错别字，显然是针对琐碎问题的明显答案，在问题提出后23分钟内就被回答，并因为它帮助了作者理解而被接受。不知道为什么这么多人甚至要谷歌和点赞它...无中生有，大惊小怪。 - c69

编辑那些基本正确但有待改进的答案是有意义的。你的回答有一定的界限，因为你可能本意是说“响应”，但仍然说“请求”是32K会误导那些不知道它完全是错误的人。(这将是那些提出此类问题并需要正确答案的人。) 此外，说出虚假信息并不符合排版错误的资格。即使您本意是说其他内容，但错误的事实是一种错误，不是打错字， - iconoclast

Answer 3

简单地说，谷歌的文章将其解释为 大小=传输大小，内容=实际大小

这是我根据阅读此主题的各种文章得出的公式（我很乐意接受您的评论以进一步改进它） 大小=压缩（内容）+响应头

请查看本文中使用的图像

谷歌的解释

- Vishwajit G

Answer 4

使用大请求行来显示两个值！

如果您没有看到第二个值（内容），则需要在Chrome网络标签中单击“使用大的请求行”按钮：

我是通过这个问题的答案找到这个功能的：

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

- Wilt

Answer 5

Size包括响应和请求信息

Size是以下内容之和：

1. 请求头传输的字节数
2. 响应头传输的字节数
3. 响应正文传输的字节数

来自文档:

检查单个资源的属性，例如其HTTP标头 [请注意复数形式，强调我的]、内容、大小等。

如果您将performanceEntry（例如在https://stackoverflow.com/上的主要文档）的transferSize与Chrome DevTools的“网络”选项卡中的Size进行比较，则会发现两者不匹配。这是因为performanceEntry不包含请求头的大小。

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

- screenspan