Sail


手在键盘敲很轻


开发者工具网络面板size列有两个值

写在前面

本文图片,倘若看不清,需要自动调节浏览器页面大小【PC用户】


昨晚发现:开发者工具网络面板size列有两个值

why-tow-values-in-size1.png

很是纳闷

在网上没有查到具体的原因

或许是我太仔细(闲得蛋疼)吧

当然最后还是解决了


Network 面板由五个窗格组成:

Controls

使用这些选项可以控制 Network 面板的外观和功能。

Filters

使用这些选项可以控制在 Requests Table 中显示哪些资源。提示:按住 Cmd (Mac) 或 Ctrl (Windows/Linux) 并点击过滤器可以同时选择多个过滤器。

Overview

此图表显示了资源检索时间的时间线。如果您看到多条竖线堆叠在一起,则说明这些资源被同时检索。

Requests Table

此表格列出了检索的每一个资源。 默认情况下,此表格按时间顺序排序,最早的资源在顶部。点击资源的名称可以显示更多信息。 提示:右键点击 Timeline 以外的任何一个表格标题可以添加或移除信息列。

Summary

此窗格可以一目了然地告诉您请求总数、传输的数据量和加载时间。

panes.png

默认情况下,Requests Table 会显示以下列。

Name

资源的名称

Status HTTP

状态代码

Type

已请求资源的 MIME 类型。

Initiator

发起请求的对象或进程。值为以下选项之一:

  • Parser Chrome 的 HTML 解析器发起请求。

  • Redirect HTTP 重定向发起请求。

  • Script 脚本发起请求。

  • Other 某些其他进程或操作发起请求,例如用户通过链接或者在地址栏中输入网址导航到页面。

  • Size。响应标头(通常为数百字节)加响应正文(由服务器提供)的组合大小。

  • Time 从请求开始至在响应中接收到最终字节的总持续时间。

  • Timeline Timeline 列可以显示所有网络请求的可视瀑布。 点击此列的标题可以显示一个包含更多排序字段的菜单。


已经知道

Size。响应标头(通常为数百字节)加响应正文(由服务器提供)的组合大小。

本文开篇的那张图,是在有缓存的情况下的

从图中可以看到,哪怕是请求不同的图片资源,上面一行的size都是在192B左右

据作者分析,这部分是 响应标头(通常为数百字节)的size大小。

这个断言实在是比较草率,难以让人信服

于是我 清空了缓存 ,看下图

why-tow-values-in-size0.png

上图是在清空缓存后截的图

可以看到上一行的size值比下一行的size值大了不到一kb。

略作分析…先上结论

有两行size值

  • 上面一行size大小为响应标头(通常为数百字节)+ 响应正文(由服务器提供)的大小

  • 下面一行响应正文(由服务器提供)的大小

用这个结论解释下前面的疑惑

没有清空缓存前,上面一行size大小:响应正文(由服务器提供)的大小为0,只有响应标头(通常为数百字节)的大小为100多B的大小。


总结

network performance 中的size值,由两部分组成:响应标头(通常为数百字节)与 响应正文(由服务器提供)

  • 上面一行size大小为响应标头(通常为数百字节)+ 响应正文(由服务器提供)的大小

  • 下面一行响应正文(由服务器提供)的大小

因为没有在网上看到相关的文章,自己分析的,或许有疏漏,仅供参考。

© 2016-2019. | 由Hexo强力驱动 | 主题Huno | 渝ICP备17002561号 | 不装弱了,我要做大佬