一些泛WEB 2.0網站爲了追求用戶體驗，可能會大量使用CSS和JS文件。這就導致在服務器帶寬一定的情況下，多用戶併發訪問速度變慢。如何加快網頁響應速度？解決辦法之一就是：依照Yahoo性能優化小組提出的N條性能優化建議對前端程序進行優化和重構，關於此文的討論很多，在這裏不再贅述。
這篇文章主要分享一下我個人在實際項目中，對於使用PHP對JS和CSS進行壓縮的經驗，在這裏假設服務器僅支持GZIP壓縮，不支持.htaccess（符合很多站長的租用的虛擬主機實際情況）。
首先說說對CSS和JS文件進行性能優化的幾個小技巧：
將多個CSS/JS文檔合併成一個文件，以減少HTTP請求
對合並後的文件進行文檔壓縮，比如分別使用js compressor和CSS compress
如果使用到一些主流的JavaScript框架，比如JQuery， Mootools或者YUI，強烈推薦直接使用Google AJAX Library以外部鏈接的形式導入基庫。
最後，就是本文所提到的，使用GZIP在服務器端對JS/CSS文檔進行壓縮。
這裏提到的方法對系統來說是無侵入式的，也就是說不管你的程序是新編寫的，還是已經上線了很久，均適用。
先看我對圖標吾愛進行優化的實例截圖（YSlow）：
在這個例子中，我分別對服務器輸出的HTML文檔、JS文檔和CSS文檔使用了GZIP壓縮，可以看到壓縮效果非常明顯，文件體積減小了70%以上。頁面加載速度明顯加快。
實際上，用PHP使用GZIP壓縮非常簡單，其核心是使用ob_gzhandler，不過需要注意的一點是，並不是所有瀏覽器都支持GZIP傳送到客戶端的數據，所以要進行一定的容錯處理。
下面是使用PHP通過GZIP壓縮CSS的實例。
在存放CSS的文件夾中新建一個style.php文件，在此文件中加入以下代碼：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
if(extension_loaded('zlib')){//檢查服務器是否開啓了zlib拓展
ob_start('ob_gzhandler');
}
header ("content-type: text/css; charset: gb2312");//注意修改到你的編碼
header ("cache-control: must-revalidate");
$offset = 60 * 60 * 24;//css文件的距離現在的過期時間，這裏設置爲一天
$expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
header ($expire);
ob_start("compress");
function compress($buffer) {//去除文件中的註釋
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
return $buffer;
}
//包含你的全部css文檔
include('global.css');
include('layout.css');
if(extension_loaded('zlib')){
ob_end_flush();//輸出buffer中的內容，即壓縮後的css文件
}
?>
|
如果你處理的是JavaScript文件，你需要將上面代碼中的第5行的Content-type修改成以下：
header ("content-type:application/x-javascript; charset: gb2312");
同樣需要注意的是文件的編碼，這裏我用的是gb2312，如果你採用的是UTF-8或其他編碼，修改成對應的即可。
修改完成之後，在原引入CSS和JS文件的地方，將.css後綴/.js後綴的文件更換成這個style.php文件即可，如：
script type="text/javascript" src="http://www.idflw.com/scripts/autoSuggest.js.php?v=121
由於上面代碼中使用到了HTTP的Expires（過期）屬性用於在客戶端緩存CSS/JS代碼，所以，如果過期時間設置的太長（比如2020 年），當你在服務器端修改了JS/CSS代碼時，客戶端可能不會立即生效。解決辦法是：在php文件後面添加一個隨機參數，如上面例子中的v=121，當下次修改了文件時，記得相應修改此隨機參數即可。