鄭昀 201207
前端優化一：Combo Handler來合並CSS/JS文件
背景
Combo Handler是Yahoo!開發的一個Apache模塊，它實現了開發人員簡單方便地通過URL來合並JavaScript和CSS文件，從而大大減少文件請求數。
目的
滿足Yahoo!前端優化第一條原則：Minimize HTTP Requests，來減少三路握手和HTTP請求的發送次數。
國內實例
淘寶網首頁meta里多個js合並的聲明：
<script src="http://a.tbcdn.cn/??s/kissy/1.2.0/kissy-min.js,p/global/1.0/global-min.js,p/fp/2012/core.js,p/fp/2012/fp/module.js,p/fp/2012/fp/util.js,p/fp/2012/fp/directpromo.js?t=2012062320120712.js" data-fp-timestamp="20120703"></script>
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
用一個問號來添加時間戳，如：
cb.php的代碼實現
重點看 cb.php 源碼：
A1.得到需要讀取的文件列表
A2.304處理：檢查請求頭的if-modified-since，如客戶端有緩存且，返回304
A3.逐一獲取文件內容（探測文件是否存在），放入數組$R_files[]中
A4.添加過期頭、輸出文件類型、用"\n"拼接文件內容並輸出
前端優化二：新浪微博的link標簽includes屬性
微博2012年在head里為link標簽引入了includes屬性，並用自家js解析。
首先，link的includes屬性不在xhtml1-transitional 的DTD聲明中：
其次，新浪的includes是用“|”把許多不需要第一時間加載的css拼起來：
它在base.js里遍歷所有link標簽，逐一尋找是否有includes屬性；然后把獲得的這些個css作為key存儲到一個字典f里，然后作為字典統統存儲到一個大字典U里：
U = {}
這個d是取當前時間，再加一個自增量：
這是一個標准的瀏覽器里獲得唯一ID的辦法。(http://www.cnblogs.com/zhengyun_ustc/)
但至於這個U什么時候用，用來做什么，則不知道。遍歷U的斷點也沒進入：
那么在什么情況下延遲加載這些css呢？有人知道嗎？