1. 程式人生 > >前端效能提高篇——伺服器端自動壓縮檔案

前端效能提高篇——伺服器端自動壓縮檔案

雖然對網站內容進行壓縮已經是中所周知的事情,但是對於我這種剛入行的確實是很實用的一個方法。
以前都只知道自己本地壓縮一些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>