文章轉載自：http://www.2cto.com/kf/201110/106634.html
介紹
使 用許多小得JS、CSS文件代替一個龐大的JS或CSS文件來讓代碼獲得更好的可維護性，這是一個很好的實踐。但這樣做反過來卻損失了網站的性能。雖然你 應該將你的Javascript代碼寫在小文件中並且將大的CSS文件分割到小文件中，當一個瀏覽器請求那些JS以及CSS文件，它卻將爲每一個文件產生 一個請求。每一個HTTP請求將導致從你的瀏覽器到服務器上的一次“往返”，從響應服務器到客戶端瀏覽器之間的等待時間稱之爲“延時”。因此，如果你有四 個JS文件以及三個CSS文件需要被頁面加載，你將要等待七次網絡上的“往返”。在本國內，延時平均爲70ms。所以總延時爲490ms，大概半秒鐘。而 來自國外的訪問，平均延時大概在200ms左右。因此，那意味着1400ms的時間浪費。而直到CSS與JS文件被完全加載，頁面纔會被完全地顯示出來。 所以，越長時間的延時，頁面加載地越慢。
延時有多糟糕
這裏有一張圖片顯示了，每一個請求怎樣產生了“延時”，這些“延時”累加起來顯著地影響了頁面的加載：
你 可以通過使用CDN(Content Delivery Network)來減少等待時間。然而，一個更好的解決方案是使用HttpHandler提供多個文件的一次請求，該HttpHandler整合了數個文 件並且提供了一次輸出。所以，代之以許多的<scropt>或者<link>標籤，你只需要寫一個<scropt> 以及<link>標籤，並將它們標記在HttpHandler中。由你來告訴handler哪些文件需要被整合，並且它提供了哪些文件的一次 輸出。這省去了從瀏覽器發出許多請求產生的延時。
這裏你能看到如果你把多個JS文件以及CSS文件整合到一個輸出裏，有怎樣的性能提升。
在通常的網頁中，你將看到很多的JS引用：
而我們可以僅用一個<script>標籤請求整個JS文件的集合，來代替這裏的每一個<script>標籤：
HttpHandler 讀取定義在一個配置文件中的文件名，整合所有的那些文件，並將它們一次響應到客戶端。它通過gzip來壓縮響應內容以此節約帶寬。另外它提供一個帶有 cache的響應請求頭來緩存響應到瀏覽器的Cache裏，使得瀏覽器對之後的訪問不需要再次請求它。
在請求參數中，你可以用“S”參數標識文件集合的名稱，然後用“t”參數來標識content type，然後使用“v”參數來標識一個版本。因爲響應被緩存了，如果你修改了文件集合中的任何一個，你將不得不增加參數“v”的值來讓瀏覽器再次下載響應。
使用該HttpHandler，你可以這樣來請求CSS文件：
這裏列出了你將需要怎樣來定義請求的集合，在web.config中：
使用HttpHandler整合器的例子
我構建了一個簡單的測試網站來向你展示它的使用，該測試網站有兩個CSS以及JS文件。Default.aspx僅使用一個<link>和<script>標籤通過HttpCombiner.ashx來請求它們。
下面是Default.aspx文件的內容：
就像你看到的那樣，有一個<link>標籤向HttpCombiner.ashx發送了一個請求並提供了請求集合的名稱——Set_Css，當然還有一個<script>標籤請求了一個Set_Javascript的集合。
上面的兩個集合都被定義在web.config文件中：
這裏列出了Handler如何工作：
(1) 首先，它會從“s”參數中讀取文件集合的名稱
(2) 然後它從web.config文件中拿到集合的定義
(3) 它讀取每一個文件，然後將它們緩存在緩衝區中
(4) 緩衝區然後通過gzip進行壓縮
(5) 被壓縮後的緩衝區內的內容將被髮送到瀏覽器
(6) 被壓縮後的緩衝區內的內容被存儲在ASP.NET緩衝中，以讓隨後的對相同集合的請求能夠直接地從Cache中獲取數據，而不是從文件系統或外部的URL去讀取每一個文件。
Handler帶來的好處：
(1) 它減少了網絡上的“往返”次數，你把越多的文件放到一個集合中，就越能減少網絡延時，它提高了性能。
(2) 它緩存了所有的整合過的壓縮響應，因此省去了一次又一次的讀取文件系統並壓縮它。它提供了可擴展性。
HttpHandler如何工作
首先handler從請求字符串中讀取集合名、類型以及版本：
如果要加載的文件集合已經被緩存了，那將直接從cache中寫入響應流。否則，文件將被一個接一個地加載，然後被存儲在一個MemoryStream。MemoryStream被通過GzipStream壓縮(如果瀏覽器支持壓縮輸出)。
在整合了所有的文件並壓縮後，被整合的字節流被緩存起來，以讓隨後的請求可以直接地從緩存獲取數據。
GetFileBytes方法讀取一個文件或者URL，然後返回字節。所以，你可以在你的網站裏使用虛擬路徑，或者你可以使用URL指向一個宿主在另外的域中的Js/Css文件。
WriteBytes方法有許多技巧在裏面。它提供了一個基於是否字節是壓縮格式的響應頭。然後它提供了一個緩存標識頭，讓瀏覽器緩存響應內容。
怎樣使用這個handler呢？
- 包含HttpCombiner.ashx在你的項目中
- 定義文件集合在你的web.config配置文件的<appSettings>節點中
- 改 變的<link>與<script>標籤，使用HttpCombiner.ashx需要的格 式：HttpCombiner.ashx?s=<setName>&t=<contentType>&v=& lt;versionNo>