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来实现对图片的延迟加载,当网页图片进入到浏 ...
一周排行
  • 在上一章中我们讨论了如何分析循环语句.在现实中,有很多算法是递归的,当我们分析这些算法的时候我们要找到他们的的递归关系.例如归并排序,为了排序一个数组,我们把它平均分为两份然后再重复平分的步骤.最后我们合并这些结果. ...
  • 在豆瓣上看到的一篇很有思想和正能量的文章,在这里请允许我用原创的方式来呈现给大家.如果你是在校的大学生或者研究生博士生,这篇文章会让你有很多的共鸣.如果你已真正的踏入这个社会,也将受益匪浅.电脑那端的你:大学生活还是 ...
  • hashmap的hash算法(转)
    HashMap 中hash table 定位算法:  int hash = hash(ke ...
  • 使用安全配置和分析使windowsserver更安全
    点击完Finish将自动打开浏览器关闭浏览器完成之后
  • 对于SOCKET在这里我不想究其历史,我只想说其时它是一种进程通讯的方式,简言之就是调用这个网络库的一些API函数就能实现分布在不同主机的相关进程之间的数据交换.  SOCKET中首先我们要理解如下几个定义概念:一是 ...
  • 将正整数n表示成一系列正整数之和:n=n1+n2+…+nk,其中n1≥n2≥…≥nk≥1,k≥1.求正整数n的不同划分个数. 例如正整数6有如下11种不同的划分:    6:    5+1:    4+2,4+1+1 ...
  • AD域中使特定的用户登录指定的客户端
     为了使指定的用户只能登录指定的客户端,而不能登录其他客户端,我们可以做如下设置.现在我们 ...
  • Solution-CentricOrganization解决方案导向型组织节选II
     第二部分:“解决方案导向”的基本概念与原则4.伪装的解决方案随着产品与服务日益复杂,顾客 ...
  • 多态与异常处理动手动脑
    1.编写一个程序,此程序在运行时要求用户输入一个 整数,代表某门课的考试成绩,程序接着给出 ...
  • 1.右键计算机--管理--存储--磁盘管理. 2.右击你要分割的磁盘C--选择"压缩卷",打开压缩C盘空间对话框--在"输入压缩空间量"中输入分区要减少的容量--单击" ...