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来实现对图片的延迟加载,当网页图片进入到浏 ...
一周排行
  • 容灾备份是通过在异地建立和维护一个备份存储系统,利用地理上的分离来保证系统和数据对灾难性事件的抵御能力.根据容灾系统对灾难的抵抗程度,可分为数据容灾和应用容灾. 数据容灾是指建立一个异地的数据系统,该系统是对本地系统 ...
  • ASASSLVPNAnyconnectSBLStartBeforeLogon用于在外网登录域下
    在上篇中已经完成了ASA上的配置,下面我来进行PC上的配置和测试.一.Windows XP ...
  • 2.1.JavaScript中的判定2.1.1.逻辑和比较运算符有两组主要的运算符,我们下面会学到:l数据比较运算符:比较操作数并返回布尔(Boolean)值.l逻辑运算符:对多于一种的情况的进行测试.我们会先看一下 ...
  • 只要流程界定清晰,项目经理就能保证项目的发展方向与最终目标相契合.广义而言,要掌控各种类型项目的发展,首先要关注十个关键的流程.一.生命周期与方法论项目的生命周期与方法论,是项目的纪律,为项目开展划出了清晰的界限,以 ...
  • 关于Junit测试框架使用的几点总结: 1.Junit中的测试注解: @Test →每个测试方法前都需要添加该注解,这样才能使你的测试方法交给Junit去执行. @Before →在每个测试方法执行前运行.因为每个测 ...
  • 在linux上运行.Net程序 并安装Linux网站 一.环境 ubuntu14.10(桌面版 官网下载的最新版) jexus5.6.3 正式版 MonoDevloper (安装完后里面有个Ubuntu软件中心 搜一 ...
  • 很NB很强大的语句,用了他你可以在模板页面写任何php语句了 {dede:php} $thisid = $refObj->Fields['id']; $row = $dsql->GetOne('selec ...
  • fdisk -l Disk /dev/sdb: 500.0 GB, 500074283008 bytes255 heads, 63 sectors/track, 60797 cylindersUnits = cyli ...
  • 1.启用来宾帐户. “控制面板-用户帐户-启用来宾帐户” 2.不使用简单文件共享 “工具-文件夹选项-查看-使用简单文件共享”将前面的勾去掉 在运行里输入 gpedit.msc 一找到“计算机配置”-“用户权利指派” ...
  • sqlite3 插入数据的时候.返回SQLITE_CONSTRAINT 原因是:数据库的表的名字是纯数字. 大改这个原因太诡异了.创建的时候能够创建成功.插入数据的时候就失败,由于表名是纯数字. 附上错误的汉语解析 ...