Web效能優化之動態合併JS/CSS檔案並快取客戶端
在Web開發過程中，會產生很多的js/css檔案，傳統的引用外部檔案的方式會產生多次的http請求，從而加重伺服器負擔且網頁載入緩慢，如何在一次請求中將多個檔案一次加載出來？接下來給大家介紹在ASP.NET中動態合併載入多個js或css檔案。
原理：減少請求伺服器的次數達到優化效果
先給大家看一下傳統引用方式和優化後的比較：
1.傳統引用方式(下圖)：
這樣的引用方式將會請求5個js檔案也就是5次http請求(下圖):
2.我們來看看優化後(下圖)：
大家可以看到修改後只有一次請求，花費的時間節省了很多，對伺服器來說也可以減緩壓力。
1後臺程式碼實現
新建一般處理程式ReadFile.ashx,程式碼如下
string name = context.Request["name"];//需要合併的檔名稱用'-'隔開string dir =context.Request["dir"];//目錄名稱js or cssstring ext =context.Request["ext"].ToLower();//檔案字尾js or css
StringBuilder content = new StringBuilder();string[] files = name.Split('-');foreach (string file in files)//迴圈所有檔案進行合併{string file_context = string.Empty;//讀取檔案 [~\{0}\{1}.{2}]如：~/js/jquery.min.jsFileInfo file_info = new FileInfo(System.Web.HttpContext.Current.Server.MapPath(string.Format(@"~\{0}\{1}.{2}",
dir, file, ext)));FileStream stream = file_info.Open(FileMode.Open, FileAccess.Read, FileShare.Read);using (StreamReader reader = new StreamReader(stream, System.Text.Encoding.Default)){file_context = reader.ReadToEnd();reader.Close();}content.Append(file_context);context.Response.Write(content.ToString());context.Response.End();
前端頁面使用方法：<script src="readfile.ashx?dir=js&name=jquery.min-account-ajaxfileupload-bootstrap-jquery.ui.custom.min&ext=js"></script>多個檔名使用'-'隔開
css檔案一樣的用法：<link href="readfile.ashx?dir=css&name=css1-css2-css3-css4&ext=css" rel="stylesheet" />
ok ，執行試試看看效果吧！
2進階篇-js,css檔案客戶端快取
js，css等檔案改動不是很頻繁，不需要每次開啟頁面都去請求一遍，我們可以將js等檔案快取在客戶端，這樣伺服器的壓力就大大減小了並且瀏覽速度也會快很多。
實現原理：通過控制http請求和響應頭資訊實現。實現方法：直接上程式碼 如下：
/** 客戶端快取處理* 處理點選“轉到”或者游標移入位址列然後回車，不傳送請求至伺服器*/context.Response.AddHeader("Cache-Control", "max-age=60");//這是用來處理F5重新整理的，也就是對Last-Modified有效，需要請求伺服器判斷是否載入新的內容context.Response.AddHeader("Last-Modified", DateTime.Now.ToString("U", DateTimeFormatInfo.InvariantInfo));DateTime IfModifiedSince;if (context.Request.Headers.Get("If-Modified-Since") != null && DateTime.TryParse(context.Request.Headers.Get("If-Modified-Since"), out IfModifiedSince)){if ((DateTime.Now - IfModifiedSince).Seconds < 60)// 60秒 快取一分鐘 判斷快取是否過時 大於60表示快取已過時{context.Response.Status = "304 Not Modified";context.Response.StatusCode = 304;return;}}
將程式碼放在合併檔案的開始位置 ，就可以達到快取的效果，如下圖再次開啟頁面瀏覽器會直接從快取中讀取資料，就不會再請求伺服器了：
當然，這裡只講了合併和快取，大家也可以將合併後的檔案進行壓縮，對於一般網站，能做到這2點已經很好了。
對於訪問量較高的網站來說 ，合併載入檔案和快取靜態檔案都是有必要的,不僅僅加快網站瀏覽速度，減輕伺服器壓力，更能節約成本。
相關資源獲取或其他疑問可在公眾號留言。如果你有優秀的原創技術類文章也可以投稿至公眾號CodeL分享給大家賺取賞金喲！