263

在 Chrome 开发工具的 Network 选项卡中查看有关样式表的信息时，一列指定了“size”和“content”：

突出显示大小/内容列的开发工具的屏幕截图

任何人都可以阐明这两个数字之间的区别吗？在某些页面上，数字很接近，而在其他页面上，它们相差很大。

4

5 回答 5

334

“大小”是线路上的字节数，“内容”是资源的实际大小。许多事情可以使它们与众不同，包括：

  • 从缓存中提供服务（小或 0“大小”）
  • 响应标头，包括 cookie（“大小”大于“内容”）
  • 重定向或身份验证请求
  • gzip 压缩（通常比“内容”更小“大小”）

从文档：

大小是响应标头（通常为几百字节）加上响应正文的组合大小，由服务器提供。内容是资源的解码内容的大小。如果资源是从浏览器的缓存而不是通过网络加载的，则此字段将包含文本（来自缓存）。

于 2012-02-06T19:06:26.443 回答
55

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

比较：

空缓存：

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

缓存：

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

于 2011-11-09T23:21:37.870 回答
12

简单来说，谷歌文章将其解释为大小 = 传输大小和内容 = 实际大小 在此处输入图像描述

这是我基于阅读有关该主题的各种文章的公式（我愿意通过您的评论进一步改进它） 大小 = 压缩（内容）+ 响应标题

请参阅本文中使用的图像

谷歌解释

于 2015-08-20T07:51:11.590 回答
6

“使用大请求行”来显​​示这两个值！

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

在此处输入图像描述

多亏了这里对这个问题的回答，我才发现了这一点：

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

于 2019-03-12T13:37:32.247 回答
0

Size包括响应和请求信息

Size是以下各项的总和：

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

从文档：

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

如果您将transferSizeperformanceEntry （例如https://stackoverflow.com/上的主文档）与SizeChrome DevTools 的 Network 选项卡中的比较，您会发现两者不匹配。那是因为performanceEntry不包含请求标头的大小。

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

于 2021-08-27T10:52:11.573 回答