web前端優化之combo handler 的引入(3)

背景

　　Combo Handler 是 Yahoo! 開發的一個 Apache 模塊，它實現了開發人員簡單方便地經過URL來合併JavaScript和CSS文件，從而大大減小文件請求數。

　　目的

　　它知足 Yahoo! 前端優化第一條原則：Minimize HTTP Requests，來減小三路握手和HTTP請求的發送次數。

　　國內實例

　　淘寶網首頁meta裏多個js合併的聲明：

　　js之間用英文逗號或&符號分隔。此src的Response是多個js文件的內容拼裝。

　　國內的 Combo Script 支持

　　淘寶李晶-拔赤在 https://github.com/jayli/combo 下發布了combo.php和minfy.php，可以作到合併文件(不壓縮)，以及合而且壓縮。

　　文件列表：

　　- combo.php 合併文件，不壓縮

　　- minify.php 合併壓縮文件

　　- cssmin.php 壓縮css

　　- jsmin.php 壓縮js

　　- cb.php 淘寶CDN合併文件策略的模擬

　　腳本使用:

　　- 要求php5及以上版本

　　- 程序在找不到本地文件的狀況下，會去指定的cdn上找同名文件

　　- 程序會自動轉義-min文件爲源文件，所以要約定-min文件和原文件要成對出現

　　- 須要定義combo.php和minify.php中的$YOUR_CDN變量

　　- 若是隻是合併壓縮local文件，則沒必要重置$YOUR_CDN變量

　　- 這裏提供cb.php，用來實現tbcdn的開發環境的模擬,apache的配置在cb.php中

　　CDN上的 Combo Handler支持

　　1.2008年7月YUI Team宣佈在YAHOO! CDN上對YUI JavaScript組件提供Combo Handler服務。

　　2.淘寶CDN支持Combo Handler，用逗號分隔js/css，用兩個問號來觸發combo特性：

　　- http://a.tbcdn.cn/??1.js,2.js

　　- http://a.tbcdn.cn/subdir/??1/js,2.js

　　用一個問號來添加時間戳，如：

　　- http://a.tbcdn.cn/??fp/directpromo.js?t=2012062320120712

　　咱們的 combo handler 服務

　　用逗號分隔，用一個問號觸發combo特性：

　　http://s0.55tuanimg.com/combo/?www/55css130501/css/public.css,www/main130501/css/mainbody0508.css和http://s0.55tuanimg.com/combo/?www/main130501/js/plugin.js,www/main130501/js/user.js

　　爲了不 CDN 緩存錯誤的版本，combo上線的訪問策略是：

　　1) 靜態文件傳到服務器端;

　　2) 部署人員使用線上靜態文件服務器的IP地址直接請求combo服務，挨個兒combo請求(目前是css一組，js一組)一次;

　　3) 部署人員確認上面的請求都成功、內容無誤後，再換成CDN地址再次請求，確保CDN緩存正確的文件內容。