** 写在前面 **
本文图片,倘若看不清,需要自动调节浏览器页面大小【PC用户】
** 昨晚发现:开发者工具网络面板size列有两个值 **
很是纳闷
在网上没有查到具体的原因
** 或许是我太仔细(闲得蛋疼)吧 **
当然最后还是解决了
** Network 面板由五个窗格组成：**
** Controls **
使用这些选项可以控制 Network 面板的外观和功能。
** Filters **
使用这些选项可以控制在 Requests Table 中显示哪些资源。提示：按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 并点击过滤器可以同时选择多个过滤器。
** Overview **
此图表显示了资源检索时间的时间线。如果您看到多条竖线堆叠在一起，则说明这些资源被同时检索。
** Requests Table **
此表格列出了检索的每一个资源。 默认情况下，此表格按时间顺序排序，最早的资源在顶部。点击资源的名称可以显示更多信息。 提示：右键点击 Timeline 以外的任何一个表格标题可以添加或移除信息列。
** Summary **
此窗格可以一目了然地告诉您请求总数、传输的数据量和加载时间。
** 默认情况下，Requests Table 会显示以下列。**
** Name **
资源的名称
** Status HTTP **
状态代码
** Type **
已请求资源的 MIME 类型。
** Initiator **
发起请求的对象或进程。值为以下选项之一：
** Parser ** Chrome 的 HTML 解析器发起请求。
** Redirect ** HTTP 重定向发起请求。
** Script **脚本发起请求。
** Other **某些其他进程或操作发起请求，例如用户通过链接或者在地址栏中输入网址导航到页面。
** Size。响应标头（通常为数百字节）加响应正文（由服务器提供）的组合大小。**
** Time **从请求开始至在响应中接收到最终字节的总持续时间。
** Timeline **Timeline 列可以显示所有网络请求的可视瀑布。 点击此列的标题可以显示一个包含更多排序字段的菜单。
已经知道
** Size。响应标头（通常为数百字节）加响应正文（由服务器提供）的组合大小。**
本文开篇的那张图，是在有缓存的情况下的
** 从图中可以看到，哪怕是请求不同的图片资源,上面一行的size都是在192B左右 **
据作者分析,这部分是 响应标头（通常为数百字节）的size大小。
这个断言实在是比较草率,难以让人信服
于是我** 清空了缓存 **,看下图
上图是在清空缓存后截的图
可以看到上一行的size值比下一行的size值大了不到一kb。
略作分析…先上结论
** 有两行size值 **
** 上面一行size大小为响应标头（通常为数百字节）+ 响应正文（由服务器提供）的大小 **
** 下面一行响应正文（由服务器提供）的大小 **
用这个结论解释下前面的疑惑
** 没有清空缓存前,上面一行size大小:响应正文（由服务器提供）的大小为0,只有响应标头（通常为数百字节）的大小为100多B的大小。**
** 总结 **
network performance 中的size值,由两部分组成:响应标头（通常为数百字节）与 响应正文（由服务器提供）
上面一行size大小为响应标头（通常为数百字节）+ 响应正文（由服务器提供）的大小
下面一行响应正文（由服务器提供）的大小
** 因为没有在网上看到相关的文章,自己分析的,或许有疏漏,仅供参考。**