教你壓縮javascript代碼和css代碼

合肥謹(jǐn)宸告訴您如何壓縮你的JS和CSS代碼：
壓縮js和css代碼可以提高瀏覽者訪問(wèn)網(wǎng)站的速度，從而增加用戶體驗(yàn)度，那么如何壓縮javascript和css代碼呢？
減小代碼在傳輸中的大小，就能提高頁(yè)面的傳輸速度，打開(kāi)網(wǎng)頁(yè)也就快了。

使用Apache2的mod_deflate模塊來(lái)壓縮頁(yè)面，但這需要在Apache中加載這個(gè)模塊才行，需要我們打開(kāi)apache中的打開(kāi)mod_deflate。

mod_deflate模塊提供了DEFLATE輸出過(guò)濾器，允許服務(wù)器在將輸出內(nèi)容發(fā)送到客戶端以前進(jìn)行壓縮(應(yīng)該也是采用gzip數(shù)據(jù)格式壓縮，deflate是一種壓縮算法)以節(jié)約帶寬。Apache2已經(jīng)內(nèi)置了mod_deflate模塊。Apache 1.3.x時(shí)代使用mod_gzip模塊來(lái)實(shí)現(xiàn)

那么對(duì)于沒(méi)有開(kāi)啟mod_deflate模塊的主機(jī)或者服務(wù)器來(lái)說(shuō)，我建議您采用ob_gzhandler函數(shù)來(lái)壓縮了，它的壓縮效果和mod_deflate相比，相差很小，幾乎可以忽略

而WordPress默認(rèn)的gzip壓縮功能是通過(guò)ob_gzhandler這個(gè)函數(shù)來(lái)實(shí)現(xiàn)的，ob_gzhandler是php 4.0.4新增的一個(gè)輸出緩存函數(shù)，并通過(guò)gzip壓縮后發(fā)送到客戶端。這個(gè)函數(shù)需要zlib庫(kù)支持，一般的虛擬主機(jī)都安裝有這個(gè)庫(kù)，所以很多blog都 使用這個(gè)方法來(lái)實(shí)現(xiàn)對(duì)php頁(yè)面的壓縮。

使用ob_gzhandler函數(shù)有3種方法讓它對(duì)php進(jìn)行壓縮：
1、在php.ini中設(shè)置output_handler = ob_gzhandler
2、在.htaccess中加入php_value output_handler ob_gzhandler
3、在php文件頭加上ob_start('ob_gzhandler');

第一種我們是沒(méi)法辦到，第二種方法不錯(cuò)，可以一勞永逸，一、二種方法效果都一樣，就是對(duì)所有php后綴文件進(jìn)行壓縮。我這里主要介紹一下第三種方法，參考“How To: Optimize Your CSS Even More”。

例如對(duì)模板下的style.css進(jìn)行壓縮

1、把模板目錄下的style.css復(fù)制一份出來(lái)，命名為style.css.php

接著在style.css.php頂部加入這句：

< ?php if(extension_loaded('zlib')) {ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>
在最后加上

< ?php if(extension_loaded('zlib')) {ob_end_flush();} ?>
（復(fù)制的時(shí)候去掉?php前的空格）

2、按照下面的方式修改header.php中的css連接

原來(lái)的：

<link rel="stylesheet" type="text/css" media="screen" href="/style.css"/>
修改后的：

<link rel="stylesheet" type="text/css" media="screen" href="/style.css.php"/>
搞定，現(xiàn)在你的CSS就可以被gzip壓縮了。

JS也可以使用同樣的方法，只是在xx.js.php頭部加入的應(yīng)該是這樣：

< ?php if ( extension_loaded('zlib') ) {ob_start('ob_gzhandler');} header("Content-Type: text/javascript"); ?>
（復(fù)制的時(shí)候去掉?php前的空格）

仔細(xì)看看K2主題的中的JS，就是修改后綴為php后在頂部加入了ob_gzhandler函數(shù)。

用這種方法，我把50多K的prototype.js和13K的style.css壓縮了，現(xiàn)在用Web Page Analyzer測(cè)試我的首頁(yè)，JS大小從88,553b減小到了45,852b，CSS從17,626b減小到了7,193b。