☰

为什么我的网页在浏览器中的大小只有硬盘上的一半？

tag-icon • tag-icon networking browser webserver
为什么我的网页在浏览器中的大小只有硬盘上的一半？

我的网页及其所有资源在磁盘上占用 1.7MB。而在 chrome 开发工具（网络选项卡）中只有 700kb。例如，根据谷歌的数据，我的 140kb css 现在只有 26kb。我的 js 包也是如此，它从 330 kb 降到了 90kb。另外，我是在私人会话中进行测试的，因此没有浏览器缓存。

我可以在 Chrome 上看到的响应标头：

Connection:Keep-Alive
Date:Wed, 30 Sep 2015 14:25:35 GMT
ETag:"e621f4-42c5-520f72d888210"
Keep-Alive:timeout=3, max=100
Server:Apache/2.2.16 (Debian)
Vary:Accept-Encoding

网络时间线

实际大小

gzip 问题

答案1

看起来您没有在开发工具中看到所有内容。

不要使用小的请求行，否则您将只能看到 Web 文件的 gzip 压缩大小。

  1. 从服务器发送的 gzip 文件大小
  2. 您的浏览器已解压该 gzip 文件，其中包含以下 KB

在此处输入图片描述

您的图像显示较大的压缩尺寸的原因是 PNG 和 JPG 是压缩格式，因此您的 Web 服务器实际上通过尝试重新压缩它而产生了不必要的开销，并且额外的开销会转化为浪费的 CPU 时间和额外的 KB。

如果您正在运行 Apache 并且有权访问httpd.conf，那么我建议添加如下一行：

# 不要压缩这些图像
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|jpg|ico|png) no-gzip dont-vary

对于已经经过大量优化和压缩的图像来说，这一点确实如此。

在我的截图中你可以看到 1+2 是较大且未优化的图像，但 3.jpg 已经精简到基本大小，因此压缩对 #3 没有帮助，但对 1+2 有帮助：

在此处输入图片描述

相关内容