Web性能优化之动态合并JS/CSS文件并缓存客户端

来源:微信公众号CodeL

在Web开发过程中,会产生很多的js/css文件,传统的引用外部文件的方式会产生多次的http请求,从而加重服务器负担且网页加载缓慢,如何在一次请求中将多个文件一次加载出来?接下来给大家介绍在ASP.NET中动态合并加载多个js或css文件。
原理:减少请求服务器的次数达到优化效果
先给大家看一下传统引用方式和优化后的比较:
1.传统引用方式(下图):

Web性能优化之动态合并JS/CSS文件并缓存客户端

这样的引用方式将会请求5个js文件也就是5次http请求(下图):

Web性能优化之动态合并JS/CSS文件并缓存客户端

2.我们来看看优化后(下图):

Web性能优化之动态合并JS/CSS文件并缓存客户端

Web性能优化之动态合并JS/CSS文件并缓存客户端

大家可以看到修改后只有一次请求,花费的时间节省了很多,对服务器来说也可以减缓压力。

1后台代码实现
Web性能优化之动态合并JS/CSS文件并缓存客户端

新建一般处理程序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" />
ok ,运行试试看看效果吧!


2进阶篇-js,css文件客户端缓存

js,css等文件改动不是很频繁,不需要每次打开页面都去请求一遍,我们可以将js等文件缓存在客户端,这样服务器的压力就大大减小了并且浏览速度也会快很多。
实现原理:通过控制http请求和响应头信息实现。实现方法:直接上代码 如下:

Web性能优化之动态合并JS/CSS文件并缓存客户端

/** 客户端缓存处理* 处理点击“转到”或者光标移入地址栏然后回车,不发送请求至服务器*/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;}}

将代码放在合并文件的开始位置 ,就可以达到缓存的效果,如下图再次打开页面浏览器会直接从缓存中读取数据,就不会再请求服务器了:

Web性能优化之动态合并JS/CSS文件并缓存客户端


当然,这里只讲了合并和缓存,大家也可以将合并后的文件进行压缩,对于一般网站,能做到这2点已经很好了。

 

对于访问量较高的网站来说 ,合并加载文件和缓存静态文件都是有必要的,不仅仅加快网站浏览速度,减轻服务器压力,更能节约成本。
相关资源获取或其他疑问可在公众号留言。如果你有优秀的原创技术类文章也可以投稿至公众号CodeL分享给大家赚取赏金哟!

原文链接:http://mp.weixin.qq.com/s?__biz=MzIzNTE2OTk1MA==&mid=402778569&idx=1&sn=f9a7f92ec4a78c754a18beeca5c34a8c#rd
相关资源获取或其他疑问可在扫码添加CodeL公众号留言。(微信公众号: codelir)

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

Web性能优化之动态合并JS/CSS文件并缓存客户端

更多相关文章
  • ASP.NETMVC4Optimization的JS/CSS文件动态合并及压缩
    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面解析速度.压缩功能实现了对javascript脚本和CSS进行压缩的功能,它能够去除脚本或样式中不必 ...
  • PHP动态压缩js,css 列表项 标签: PHP 正式发布产品时,我们希望将项目里的js,css合并压缩,以减少http请求.防止轻易查看源代码. 使用 只需要在头部引入一下代码即可: <meta charset="utf-8"/> <title>dem ...
  •         性能魔方,新一代云应用性能管理服务商,今天宣布推出基于云的web性能优化服务,帮助客户优化网站速度,提高用户体验,以获得更好的用户转化率和收入.        性能魔方团队有着丰富的行业经验和卓越的前瞻思想,并充分利用云计算技术,使网络更快."我们有信心,我们的网站性能监测 ...
  • 移动web性能优化笔记
    移动web性能优化 最近看了一些文章,对移动web性能优化方法,做一个简单笔记 笔记内容主要出自 移动H5前端性能优化指南和移动前端系列——移动页面性能优化
  • Web性能优化:WhatWhyHow
    为什么要提升web性能? Web性能黄金准则:只有10%~20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上. web性能对于用户体验有及其重要的影响,根据著名的`2-5-8`原则: 当用户在2秒以内得到响应,会感觉系统的响应非常快 当用户在2-5秒之内得 ...
  • 常用方法 压缩源码和图片 JavaScript文件源代码:可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG图片可以根据具体质量来压缩为50%到70%,PNG可 以使用一些开源压缩软件来压缩,比如24色变成8色.去掉一些PNG格式信息等.选择合适的图片格式:如果图片颜色数较多就使用JPG格 ...
  • Web性能优化:图片优化
    程序员都是懒孩子,想直接看自动优化的点:传送门 我自己的Blog:http://cabbit.me/web-image-optimization/ HTTP Archieve有个统计,图片内容已经占到了互联网内容总量的62%,也就是说超过一半的流量和时间都用来下载图片.从性能优化的角度看,图片也绝对 ...
  • Web性能优化之图片延迟加载
    来源:微信公众号CodeL 对于一些图片多,页面长的网页来说,如果每次打开页面加载全部的网页内容,页面加载速度势必会受到影响,如果每次打开网页只将网页可视区域的内容加载给用户 ,将大大提高网页浏览速度,同时也减轻服务器负载,我们可以使用lazyload.js来实现对图片的延迟加载,当网页图片进入到浏 ...
一周排行
  • 轻轻倚楼边,月霜霖婵媛.萧萧指上弦,丝丝缱绻.纷纷劳伤燕,越落于礵眠.弦断,终须离散.栩栩花凋零,寒风抚心宁.幽幽夜色静,翩舞娉婷.双双榴花萤,萦缭与月映.清馨,羽弥拂铃.幕幕落日寂,浮华掩泪泣.迷迷伊人丽,浅笑依稀 ...
  • 在自己机器上安装rtx服务器和客户端 测试系统是win7  64 旗舰版 从企鹅上下载的2013 rtx 服务端和客户端账户用的是普通用户user 在安装rtx服务端时候 会在桌面上出现一个rtxinstall.tx ...
  • ext界面初学:一些项目上的接触
    这两天SFCS的项目需要对架在的ext架构上的进行修改和优化,在这个过程中,初学ext,开 ...
  • ~/rails_projects/first_app$ git config --global core.editor "subl -w"如果使用其他编辑器,请使用以下代码替换 subl -w:T ...
  • http://acm.tzc.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=2410 /*题意;给出一定数量的棍子用这些棍子组成一个正方形 ...
  • shell结合expect实现堡垒机的跳转功能
    想法:禁止用户通过ssh直接远程到应用主机上,通过限定用户登录,利用运维主机跳转到用户有权 ...
  • 文章作者: 落叶纷飞&华夏鸡头4信息来源: 邪恶八进制信息安全团队kevin blog应该是大家比较喜欢的简约blog了吧,最近从流转JJ那拿了一套,今晚闲着无聊,就想看看它有什么漏洞.看了一会,看倒comm ...
  • 随着Android系统的普及以及刷机热潮的蔓延,很多pc端的一键傻瓜式刷机辅助工具纷纷问世,有了他们的帮助我们即可轻松实现刷机.那么在众多的制作工具中,哪一款才是适合自己的?本人一直钟爱的是蘑菇rom助手,下面就和大 ...
  • ------Java培训期待与您交流! -------Eclipse常用快捷键  Eclipse的编辑功能非常强大,掌握了Eclipse快捷键功能,能够大大提高开发效率.Eclipse中有如下一些和编辑相关的快捷键. ...
  • 背景 Jenkins console输出乱码,如 ������������� 1 解决办法 Jenkins Master 设置utf8 encoding Tomcat 启动脚本 export JAVA_TOOL_OP ...