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分享給大家賺取賞金喲！

原文鏈接：http://mp.weixin.qq.com/s?__biz=MzIzNTE2OTk1MA==&mid=402778569&idx=1&sn=f9a7f92ec4a78c754a18beeca5c34a8c#rd
相關資源獲取或其他疑問可在掃碼添加CodeL公眾號留言。(微信公眾號: codelir)

微信掃一掃獲取更多開發資源：