借助HttpCombiner让你的网站加速
上一篇 < 利用Microsoft Ajax Minifier在服务器端对静态资源进行自动化压缩 > 得到不少有意义的交流和建议,最近也在不停的尝试做一些网站优化的工作,我会陆续的写一些或者翻译一些优化方面的文章跟大家交流,一方面提供给有需要的朋友一些参考,另一方面也希望得到高手们的指点。
经过上一篇文章介绍的压缩步骤,我们的资源文件(没指明则特指js,css静态资源文件)已经减肥成功,保持了苗条的身材,这样从服务器端传输到客户端也没那么费劲了,初步获得小成功,但是根据 雅虎网站页面性能优化的34条黄金守则 提供给我们的建议,让优化工作做得更进一步,比如一个页面引入了4个css文件,5个js文件(这个数目还算过得去,也许还会更多),这样页面载入的时候就会产生9个请求,加之js加载又是阻塞加载的方式,这样也会造成一定程度上的性能损伤。寻思了一会在网上找到这么一个文件HttpCombiner.ashx,接下来介绍它能帮我们做的事情。
HttpCombiner.ashx是一个http处理程序,通过它能够合并多个CSS,Javascript或者url成为一个响应让页面载入加速.同时它可以合并,压缩并缓存响应,这样就使得我们的应用程序更快的加载和具备更好的扩展性。
介绍
用一个大的Javascript或者CSS文件替代多个小体积的Javascript和CSS文件这是一个很好的实践,可以获得更好的可维护性,但是在网站性能方面会产生一定的影响(这里指的是随着文件体积的增大,随之消耗服务器的内存也会增加)。尽管你应该把Javascript代码单独写成小支的文件,CSS文件拆分成小块,但是当浏览器请求这些文件时,会产生同等数量的http请求。每个http请求都会产生一次从你的浏览器到服务器端网络往返过程,并且导致推迟到达服务器端和返回浏览器端的时间,我们称之为延迟。因此,如果你有4个Javascript和3个css文件在页面中被加载,你浪费掉了7次因网络往返过程产生的时间。在美国,延迟平均是70毫秒,这样你就浪费了7*70 = 490毫秒,大致延迟了半秒的时间。在美国之外的国家访问你的页面,平均延迟大约是200毫秒,这意味着你的页面有1400毫秒的时间是在等待中度过。浏览器在你的CSS和Javascript文件完全加载完成之前是不能很好的渲染你的页面的。因此越多的延迟让你的页面载入越慢。
延迟导致多大的影响
下图显示每个请求的延迟造成页面加载时显著的延误
你可以通过使用CDN加速来减少等待时间.阅读我前一篇文章关于使用CDN. 然而,一个更好的解决方案是使用一个HttpHandler来合并多个文件成一个文件一次性输出.因此,你只要将多个<script>或者<link>标签合并成为一个并将他们指向HttpHandler,指定哪些文件需要作为一次响应传输到浏览器段.这样就减少了请求次数以及消除因其造成的延迟This saves browser from making many requests and eliminates the latency.
通过上图你可以看见通过合并多个JavaScripts和CSS文件为一所带来各方面的提升。
在一个电影的web页面中你会看到许多JavaScripts引用
<script type="text/javascript" src="http://www.msmvps.com/Content/JScript/jquery.js"></script> <script type ="text/javascript" src="http://www.msmvps.com/Content/JScript/jDate.js"></script> <script type="text/javascript" src="http://www.msmvps.com/Content/JScript/jQuery.Core.js"></script> <script type="text/javascript" src="http://www.msmvps.com/Content/JScript/jQuery.Delegate.js"></script> <script type="text/javascript" src="http://www.msmvps.com/Content/JScript/jQuery.Validation.js"> </ script >
你可以用Http Handler通过scripts的设置来实现将多个单独的 <script>标签合并成一个:
<script type="text/javascript" src="HttpCombiner.ashx?s=jQueryScripts&t=text/javascript&v=1"></script>
HTTP Handler 通过配置文件中设置的名称读取所有文件合并成一次响应传输到客户端,通过gzip压缩响应节省了宽带使用.此外还会生成合适的缓存头来缓存响应的浏览器缓存,因此,浏览器不会再次向服务器发送请求.
在查询字符串中,'s'指明配置文件中的设置名,'t'为文件的内容类型,'v'为版本号.一旦响应被缓存,如果你更改了配置中任何文件,你将不得不增加参数'v'的值来让浏览器再次下载服务器端最新的响应:
<link type="text/css" rel="stylesheet" href="HttpCombiner.ashx?s=CommonCss&t=text/css&v=1"></link>
在web.config中的设置如下:
<add key="jQueryScripts" value="~/Content/JScript/jquery.js,
~/Content/JScript/jDate.js,
~/Content/JScript/jQuery.Core.js,
~/Content/JScript/jQuery.Delegate.js,
~/Content/JScript/jQuery.Validation.js"/>
<add key="CommonCss" value="~/App_Themes/Default/Theme.css,
~/Css/Common.css,
~/Controls/Grid/grid.css"/>
</appSettings>
使用HttpCombiner实现一个网站示例
我已经写好一个测试网站来演示如何使用HttpCombiner.网站包含2个CSS和2个JS文件. default.aspx文件中<link>和<script>标签2个请求都是指向了HttpCombiner.ashx文件
.
下面就是Default.aspx的内容:
就如你所见,页面中 <link >和<script>标签 都同时指向了 HttpCombiner.ashx,并且所带的参数's'就是web.config文件中定义的2组设置 :
该处理程序如何工作:
- 首先通过传入的参数"s"获得设置名称
- 然后根据设置名称获得web.config中定义的文件名称(通过特定的分隔符分隔开)
- 读取每单个文件然后存储到缓冲区
- 通过gzip压缩缓冲区中的数据
- 发送压缩后缓冲区中的数据到浏览器端
- 已压缩后缓冲区的数据使用ASP.NET缓存模块缓存起来以便在频繁请求同一个设置的情况下直接访问缓存而不必从文件系统或者外部URL读取文件
该处理程序带来的好处:
- 可以节约因网络延迟造成的时间.如果一次性设置的文件越多,节省的网络延迟性时间越多,同时得到的性能提升就越可观.
- 因为缓存了所有压缩后的响应数据,这样节省了反复执行从文件系统中读取并压缩的步骤,提升了应用程序的伸缩性.
如何让HttpHandler工作
首先处理程序会从QueryString中获取setName,contentType,version三个关键参数:
如果设置的文件已经被缓存起来,它将直接被写入到缓存当中去,否则它们会从MemoryStream中分别被加载。如果浏览器支持压缩输出的话,MemoryStream会使用GZipStream进行压缩
当合并所有文件之后并压缩,合并的二进制流被缓存起来便与频繁的访问可以直接从缓存中读取.
GetFileBytes方法主要是根据文件路径或者http url读取文件并返回二进制。因此您可以使用你站点的虚拟路径或者使用外部站点Javascript/CSS的url
WriteBytes 方法很巧妙,它会基于二进制流是否为压缩而生成一个合适的header,并设置浏览器缓存头让浏览器缓存服务器端的响应
目前发现部署到运行环境中会出现异常(远程主机关闭了连接。错误代码是 0x80072746。),将上面图片中的代码最后2行替换成
response.Flush();if (response.IsClientConnected) response.OutputStream.Write(bytes, 0, bytes.Length);response.End();
另外就是注意HttpCombiner.ashx文件建议直接放在跟.js或者.css同一个目录下(排除你的项目有统一的路径处理方案),不然会出现路径引用问题
如何使用该文件:
- 包含
HttpCombiner.ashx
在你的项目中 - 在你的web.config的
<appSettings>定义需要设置的文件节点
- 更改你网站的
<link>
和<script>
标签指向HttpCombiner.ashx
如下面的格式:
HttpCombiner.ashx?s=<appSettings里设置的节点名>&t=<文件类型>&v=<版本号>
结尾
本文是在优化实际项目中的总结,解决方案源自网上并加以翻译和整理而成,有不当之处或者建议请大家一起讨论。
原文连接:http://www.codeproject.com/KB/aspnet/HttpCombine.aspx 下载示例
===========================================================
补充:
#6楼 冰绿茶 提供的combres组件很有价值,比本文提供的解决方案更有参考性,大家可以猛击连接前往围观,博客园也有相关的介绍文章,这里给出几个连接
http://www.codeproject.com/KB/aspnet/combres2.aspx(codeproject上的原文)
http://www.cnblogs.com/shanyou/archive/2010/04/03/1703597.html(本文评论部分也有很多亮点)
http://www.cnblogs.com/liping13599168/archive/2010/04/04/1704154.html(本文对combres部分源码也进行了分析)
#7楼 ayumi 分享的另外一个关于image sprite的组件,早之前重典有写博文介绍过,在ASP.NET中自动合并小图片并使用CSS Sprite显示出来
转载于:https://www.cnblogs.com/aNd1coder/archive/2011/01/12/Speed-up-your-website-by-using-httpCombiner.html
借助HttpCombiner让你的网站加速相关推荐
- 杨建:网站加速--内容简介
--提升性能的同时为你节约10倍以上成本 From: http://blog.sina.com.cn/iyangjian 从基本HTTP协议,服务器编写(只讲思路),到完整系统搭建(包括负载均衡LVS ...
- Fikker反向代理服务器的网站缓存加速/网站加速基础教程
2019独角兽企业重金招聘Python工程师标准>>> Fikker反向代理服务器的网站缓存加速/网站加速基础教程 - 简介篇 前言: 本教程是针对第一次接触和使用 Fikker 的 ...
- CDN帮助网站加速的方法
2019独角兽企业重金招聘Python工程师标准>>> CDN 是一个服务器网络,而不是单个服务器,具有多个地理位置.当用户访问一个网站时,信息从最靠近他们的服务器位置被提取出来. ...
- CentOS下使用Varnish为网站加速
1 varnish概述 2 安装varnish 3 varnish 缓存原理 4 实战:缓存一个网站 5 实战:使用varnish缓存多个网站 1 varnish概述 Varnish是一款高性能的开源 ...
- apache 网站转nginx_堡塔网站加速宝塔面板网站加速安装设置使用教程
堡塔网站加速是宝塔面板为用户开发的一款网站加速插件,基于页面缓存的网站加速插件,支持常见的众多建站程序加速.其原理是在http协议层缓存动态页面,对实时信息及已登录的会话跳出缓存,此技术主要针对匿名访 ...
- 合理设置域名TTL值给网站加速
最近一段时间看到几篇关于网站加速的文章,通篇都在讲页面优化.服务器优化.网络优化这些东西(当然我不否认这些很重要),但几乎所有文章都忽略了决定网站访问速度的一个重要因素:DNS速度,糟糕的DNS解析速 ...
- https利用360cdn实现网站加速
1.进入奇安信网站注册账户 https://wangzhan.qianxin.com/ 注册登录并完善站长信息. 2.申请ssL证书(阿里云版本) 将在阿里云或者腾讯云申请的https证书转化为格式. ...
- CDN网站加速的原理和流程
CDN的全称是Content Delivery Network,即内容分发网络 CDN的通俗理解就是网站加速,CPU均衡负载,可以解决跨运营商,跨地区,服务器负载能力过低,带宽过少等带来的网站打开速 ...
- 盘点国内外十大免费CDN网站加速服务
盘点国内外十大免费CDN网站加速服务 核心提示: 除了传统的CDN厂商之外,云服务商也开始进驻该领域,市场上可供选择的免费的CDN还是比较多的,在此罗列出十大免费CDN,供寻找免费CDN加速服务的朋友 ...
最新文章
- 麻省理工正式宣布人工智能独立设系!人工智能与电子工程、计算机科学系将三分天下...
- 国防科技大学教授:殷建平——计算机科学理论的过去、现在与未来
- linux中三个time:atime、mtime、ctime
- ALV GRID中实现RadioButton单选按钮
- Spark Core
- xml文件导入wps_WPS2016文档怎么保存为XML格式?
- 如何通过MongoDB自带的Explain功能提高检索性能?
- 矩池云上安装 NVCaffe教程
- 【直观理解】粒子滤波 原理及实现
- TextBox多行输入时,屏蔽回车键
- WebBrowser.ObjectForScripting 属性的使用
- 查看Andriod内置浏览器WebView版本
- Ambarella公司申请首次公开招股
- Android实现图片轮播
- 详解RAI I、C++中的智能指针以及一些常见的面试题
- 输入一个字符串,对该字符串进行逆序,输出逆序后的字符串。
- Android Factory Images for Nexus Devices
- 山西民生养老认证显示服务器异常,民生山西养老认证
- Golang读写锁读锁重复获取的问题
- 向插件中添加guc参数
热门文章
- 浅谈软件项目开发过程中的主要项目风险及对策
- python 抓取猫眼电影评分
- 如何用计算机打出平方,平方符号在电脑怎么打出来(电脑输入平方符号的2种方法)...
- shell连接CentOS启动可视化界面startx
- win10系统ipv6服务器地址,win10系统查看电脑ipv6地址的操作方法
- 修改远程桌面3389端口
- BT级别的IC项目验证基本流程
- android generated java files,Android protobuf-javalite 实践
- 程序员常用资源工具集合
- 五种方法教你永久关闭win10自动更新