減少http請求數,有三個好處,即減少DNS請求所耗費的時間.、減少服務器壓力、減少http請求頭,因此這是我們前端性能優化的一個關鍵點。
對於我們前端來說,減少http請求數的一個途徑就是合併js和css文件,稱爲combo,也稱打包,也就是通過將多個文件壓縮合併成一個文件,並緩存在服務器,然後一次性傳輸到客戶端。這樣可以有效地減少網站中所有頁面的http請求數。
經研究發現,Google Code上有一個PHP的開源項目——minify,它可以合併、精簡、Gzip壓縮和緩存JavaScript和CSS文件。
Minify的使用主要有以下幾個關鍵點:
1、將minify的min文件夾放入站點根目錄下。
2、運行環境:Apache + PHP。
3、啓用Apache的Mod Rewrite模塊。
4、在min文件夾下新建.htaccess文件,並在其下添加如下Rewrite規則:
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^([a-z]=.*) index.php?$1 [L,NE]
</IfModule>
5、配置Minify,即編輯min/config.php文件,我們主要是設置緩存目錄、緩存時間、可合併文件最大數量,其餘的config.php文件中有叫詳細的註釋,恕不贅述。
6、使用方法:在我本地映射的域名下登錄hoogle.fclub.cn/min,就可以將我們需要合併的文件一一添加,update後生成一串地址,如下圖:
其中b參數爲文件本地目錄,f參數爲js或css文件名。熟悉了後也可以不通過界面update,直接寫出合併後的地址。
比如我們網站page_header.lbi中的前面8個js,現在這8個文件是放在本地,引入時直接用如下代碼就相當與載入了8個js,http請求變成了一次。
<script type="text/javascript" src="/min/b=skins/js_new&f=jquery-1.4.2.js,utils.js,fclub.js,jquery.scrollTo.js,fclub_index.js,smoothAnchor.js,overlay.min.js,toolbox.expose.min.js,centerDiv.js"></script>
這樣即可以讓這8個js文件合併、精簡,然後通過gzip壓縮成一個文件.gz文件並緩存在服務器中相應的文件夾中。
7、刪除min/builder/index.php 文件或修改其文件名。防止他人通過“hoogle.flcub.cn/min”登錄,如需通過界面生成引入地址,則讓index.php恢復。
8、當需要調試js的時候,可以開啓debug模式,首先在配置文件config.php中啓用debug,再在引入地址中加入&debug=1,如下所示:
<script type="text/javascript" src="/min/b=skins/js_new&f=jquery-1.4.2.js,utils.js,fclub.js,jquery.scrollTo.js,fclub_index.js,smoothAnchor.js,overlay.min.js,toolbox.expose.min.js,centerDiv.js&debug=1"></script>
這樣即可像單獨引入一樣快速定位到某一js的某一行,進行調試。
Hoogle 2011-12-11
新浪微博:http://www.weibo.com/yinuoba 歡迎關注。。。
IT博客大賽投票邀請:https://blog.51cto.com/contest2011/1793311