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分享给大家赚取赏金哟！