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引用 <scripttype="text/javascript"src="http://www.msmvps.com/Content/JScript/jquery.js"></script> <scripttype ="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> <scripttype="text/javascript"src="http://www.msmvps.com/Content/JScript/jQuery.Delegate.js"></script> <scripttype="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’的值来让浏览器再次下载服务器端最新的响应： <linktype="text/css"rel="stylesheet"href="HttpCombiner.ashx?s=CommonCss&t=text/css&v=1"></link> 在web.config中的设置如下： <appSettings> <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>
本文出自快速备案，转载时请注明出处及相应链接。