巧用HttpCombiner让你的网站加速

开发
本文是在优化实际项目中的总结.HttpCombiner.ashx是一个http处理程序,通过它能够合并多个CSS,Javascript或者url成为一个响应让页面载入加速.同时它可以合并,压缩并缓存响应,这样就使得我们的应用程序更快的加载和具备更好的扩展性。

     经过利用Microsoft Ajax Minifier在服务器端对静态资源进行自动化压缩,我们的资源文件(没指明则特指js,css静态资源文件)已经减肥成功,保持了苗条的身材,这样从服务器端传输到客户端也没那么费劲了,初步获得小成功,但是根据<<雅虎网站页面性能优化的34条黄金守则>>http://developer.yahoo.com/performance/rules.html提供给我们的建议,让优化工作做得更进一步,比如一个页面引入了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文件完全加载完成之前是不能很好的渲染你的页面的。因此越多的延迟让你的页面载入越慢。

 

   延迟导致多大的影响

   下图显示每个请求的延迟造成页面加载时显著的延误

HttpHandler

   你可以通过使用CDN加速来减少等待时间.阅读我前一篇文章关于使用CDN. 然而,一个更好的解决方案是使用一个HttpHandler来合并多个文件成一个文件一次性输出.因此,你只要将多个