Web性能優化之動態合併JS/CSS文件並緩存客戶端

來源：微信公衆號CodeL

在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)

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