Safari 审查元素 网络 里大小和已传输

"已传输"就是实际传输大小，参见我下面的截图的Transferred，而“大小”就是文件原始大小, Size。

之所以"已传输"会比“大小”小的原因是：

在客户端与网站“握手”的时候，客户端(Safari)会告诉网站服务器，它是否支持压缩传输，如果服务器端设置了压缩，而且客户端支持压缩，那么服务器端会根据本身的配 置情况（某些文件类型压缩等等设置），可能将文件压缩后再传输，客户端接收到的数据，它通过解释Content-encoding得知，传过来的是否经过压缩的数据，如果 是，就先解压后再渲染为用户可视的部分。

一般来说，压缩后的数据都会比原始数据小，所以Transferred看上去比Size要小的情况。

经上面的解释，到底是否压缩传输，要依据客户端和服务器端配置，现代的Web服务器都支持压缩，比如Apache和IIS等等。

比如我的下图，当你选定某个小的项目后，点击箭头的按钮，会出现右边的视窗，在Headers里面的Content-encoding，就标识着文件的传输是否经过压缩， 见下图，示例中是gzip压缩的：

客户端和服务器端双方经过握手后，服务器端针对客户端的能力以及自己的设定，决定如何传送文件给客户端，客户端在其中的作用只是提供：我可以接受是什么样的信息（这在每次 握手时是相同的），而无法决定服务器给它什么。所以，纠结于与客户端的能力，还不如在服务器端看log来得更有助于问题的解决。

单单依赖于所显示的已传输字节数，不如详细查看request和response header的具体参数。我的举例中，虽然字节数不尽相同，但是从你的服务器端所接受的文件是同一个文件，这说明客户端计算大小的方式不尽相同。是否是压缩传输，看he ader中的content-coding和实际传输文件。还涉及服务器端的配置，是否使用预压缩，是否页面缓存等等。

还有就是缓存的问题，是否使用忽略缓存刷新(Reload ignore cache)，也是一个影响传输的因素。

大小的不一样，我觉得可能是浏览器对于 Transfer-Encoding:chunked 的解释不同造成的。

在Safari和Google Chrome比较中，没有chunked两个css文件，显示的传输大小一样，而只有两个大的css文件文件，在Chrome中的Response Headers显示是chunked，而在Safari中没有这一部分。

他们两个使用的Webkit版本的确也不一样。

大神，佩服，膜拜中~

而且Safari中的"已传输"应该是所有的有关该文件的传输字节数，也就是包括了头Headers等。

其实是每个浏览器对于自己显示的东西的具体含义有点不一样，彼此之间无法一一对应。

最准确的还是要看你的nginx服务器端的数据。

我尝试的http://img.achair.cn/wp-content/themes/Newspaper/style.css

在Safari和Google Chrome上都显示的是gzip压缩，而且传输的压缩文件是同一个:

只不过在两个浏览器中的显示大小不一样大。

你再在服务器端看看log之类的，核对一下。