谁能解释一下，为什么在任何页面上调试时，我总是发现 Firefox DevTools、Firebug 和 Chrome DevTools 在传输文件大小方面存在很大差异？例如，我看到 Stack Overflow 的主页：
Chrome 开发工具：282 KB
萤火虫：246 KB
Firefox 开发工具：873 KB
真相是什么？
【问题讨论】：
标签： firebug google-chrome-devtools firefox-developer-tools
与 Chrome DevTools 的 Network 面板和 Firebug 的 Net 面板相反，Firefox DevTools 的 Network 面板中的摘要显示 @ 987654321@。这意味着它显示文件的实际大小，而不是文件传输的字节数。
背景：一些服务器在将响应内容发送给客户端之前会使用GZIP等算法压缩响应内容，以节省网络带宽。客户端在收到内容后解压缩。
Firefox DevTools 不提供传输文件大小的摘要（从 Firefox 38.0.1 开始）。 Network 面板仅在面板底部显示解压缩大小的文件：
因此，我在摘要和性能分析中创建了一个enhancement request to display the transferred size。
虽然面板有一个 Transferred 列列出了每个文件的传输大小：
【讨论】：
影响网络流量的因素太多了。
1) 浏览器实际上实现了不同的下载策略。
作为一个非常简化的示例，考虑多次引用图像的情况：
<img src="someImage">
<div style="background-image:url('someImage');">
最简单的方法是每次加载图像。这是在浪费带宽，从而导致糟糕的用户体验。相反，我们可以检测到这是同一张图片，然后下载一次。
或者更好的是，我们可以缓存它，并记住我们上次从该服务器获取具有该名称的图像的时间，并因此显示它。为了让 Web 开发人员能够更新他们的图像，我们需要与服务器交换一些 HTTP 标头，以确保我们拥有的图像缓存实际上是最新的。
如果网站使用第三方托管的东西怎么办。 我们可以缓存它吗？当我们访问另一个使用相同第三方材料的网站时该怎么办？
2) Web 开发人员及其技巧
所以让我们玩一个优化游戏。假设我需要网站在 IE 和 Chrome 中执行某些操作，但是渲染引擎的差异使得创建在这两种浏览器中看起来都很棒的跨浏览器布局变得很痛苦......
我可以破解 CSS 以在两种浏览器中工作，但实际上，我也可以简单地为每个浏览器创建一个布局文件，并独立修改它们。 IE。 http://www.thesitewizard.com/css/excludecss.shtml
除非浏览器很笨，否则它会识别优化并只获取它需要的布局文件而不是所有可用的布局文件。 这也适用于 JavaScript 文件。
一些浏览器支持某些东西，而这些东西使做花哨的技巧变得更容易。对于不支持它的浏览器，您需要更多代码或插件，如 Flash 或 Silverlight 或其他东西。您不想让选择“正确”浏览器的用户受到影响，因此您可以添加优化。
3) 无穷无尽的问题解答 广告系统使用了上述技巧。如果你幸运的话，所有第三方的东西都会使用它们。有些托管 jQuery，有些参考 Google 的在线托管版本的库或类似版本。
对于展示第三方内容的网站，请注意广告可能包含代码或不同大小的图像（以字节为单位）。
还要注意，下载的字节数也可能指不同的东西。它可以显示实际传输的内容，但也可以显示如果我们不使用缓存将被传输的内容。
【讨论】：