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