你的位置:首页 > ASP.net教程

[ASP.net教程]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)

微信扫一扫获取更多开发资源: