前端性能提高篇——服务器端自动压缩文件

版权声明：本文为CSDN博主「defire666」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
 

 

虽然对网站内容进行压缩已经是中所周知的事情，但是对于我这种刚入行的确实是很实用的一个方法。
以前都只知道自己本地压缩一些css js代码，在服务器端实用压缩过的版本。但是html代码的压缩确没有尝试过。除了html、css、js像一些txt，php，jsp等啊，都是可以直接在Apache 上直接配置压缩的。并且压缩比例很高，对于响应速度影响很大。文件基本都缩小70%！！
压缩自己的网页还有一个好处就是提高网页被搜索**引擎收录**的机会。

 Gzip Web压缩工作原理
Web服务器处理HTTP压缩的过程如下：
    1. Web服务器接收到浏览器的HTTP请求后，检查浏览器是否支持HTTP压缩（根据http请求头中的Accept-Encoding 信息）；如：Accept-Encoding:gzip, deflate, sdch
    2. 如果浏览器支持HTTP压缩，Web服务器检查请求文件的后缀名；
    3. 如果请求文件是HTML、CSS等静态文件，Web服务器到压缩缓冲目录中检查是否已经存在请求文件的最新压缩文件；
    4. 如果请求文件的压缩文件不存在，Web服务器向浏览器返回未压缩的请求文件，并在压缩缓冲目录中存放请求文件的压缩文件；
    5. 如果请求文件的最新压缩文件已经存在，则直接返回请求文件的压缩文件；
    6. 如果请求文件是动态文件，Web服务器动态压缩内容并返回浏览器，压缩内容不存放到压缩缓存目录中。

    在Apache 上如何配置呢？
    Apache上利用Gzip压缩算法进行压缩的模块有两种：mod_gzip 和mod_deflate。要使用Gzip Web压缩，请首先确定你的服务器开启了对这两个组件之一的支持。在Linux服务器上，现在已经有越来越多的空间商开放了对它们的支持，有的甚至是同时 支持这两个模块的。例如目前Godaddy、Bluehost及DreamHosts等空间商的服务器都已同时支持mod_gzip 和mod_deflate。

    虽然使用Gzip同时也需要客户端浏览器的支持，不过不用担心，目前大部分浏览器都已经支持Gzip了，如IE、Mozilla Firefox、Opera、Chrome等。
通过查看HTTP头，我们可以快速判断使用的客户端浏览器是否支持接受gzip压缩。
若发送的HTTP头中出现以下信息，则表明你的浏览器支持接受相应的gzip压缩：
Accept-Encoding: gzip     支持mod_gzip
Accept-Encoding: deflate     支持mod_deflate
Accept-Encoding: gzip,deflate    同时支持mod_gzip 和mod_deflate

如果服务器开启了对Gzip组件的支持，那么我们就可以在**http.conf或.htaccess**里面进行定制，下面是一个.htaccess配置的简单实例：
 

以下为引用的内容： 
mod_gzip：

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

以下为引用的内容： 
mod_deflate：

<ifmodule mod_deflate.c>
DeflateCompressionLevel 6 #压缩率, 6是建议值.
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE image/svg+xml
</ifmodule>