我听说 CSS 和 JavaScript 等静态内容以 GZip 格式传输效果更佳。内容开发者网络 (CDN) 一直都是这样做的。
但是我不明白这种格式是如何工作的。首先,我尝试通过命令行创建一个 gzip 文件。文件扩展名是。这与和.gz
不同。浏览器如何识别哪个文件是 gzip 压缩的,哪个不是。.css
.js
第二,浏览器如何“解压”文件?我把我的拖到index.html.gz
浏览器上。但没有人工作。
- 这种 gzip 压缩在现实世界中如何工作?
- 如果我想使用 Gzip 格式提供 CSS/JavaScript,我需要做什么。
答案1
您所说的 gzip 对最终用户来说是不可见的,对于您作为开发人员来说也是如此。它由您的 Web 服务器和客户端的 Web 浏览器负责。
对于 IIS,您需要启用 GZip ISAPI 扩展(请查看此站点以了解操作方法),对于 Apache,则是 mod_deflate。
当 Web 浏览器完成其请求后,但在将其发送到外界之前,它将对内容进行 gzip 压缩并放入一个特殊的标头,以便浏览器知道内容已被压缩。
当 Web 浏览器收到响应时,它会解压数据并读取文件。这对最终用户来说是完全透明的。
通常情况下,您只会在文本文件上使用 GZip。在图像上使用它毫无意义,因为图像已经被高度压缩。
我注意到,当对所有静态内容(CSS、Javascript 等)启用 GZip 时,页面大小从 90Kb(加载时间约为 1 秒)下降到大约 5Kb(加载时间,0.4 秒)。
如果您使用 Wireshark 查看数据包并重新组装它们,您会发现,您会请求/index.html
,但网络服务器会获取/index.html
,将其 GZip 成/index.html.gz
并发送出去。网络浏览器知道这一点,并将其解压缩,以便将其恢复为/index.html
,因此当您转到查看源代码时,您会看到/index.html
,而不是/index.html.gz
答案2
通常,Web 服务器的静态内容的 Gzip 压缩是通过 Apache mod_deflate 完成的
http://httpd.apache.org/docs/2.0/mod/mod_deflate.html
这通常只能通过 text/plain、text/html 和 text/xml 格式的文本文件来完成,也可以通过其他纯文本内容类型(css、js 等)来完成,但这可能会导致早期版本的 Internet Explorer 出现问题。(编辑:aparrently v6 及以下版本)
无论图像以何种格式存储,都应该已经压缩,因此不应该对其应用额外的(即 mod_deflate)压缩。