asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度

介绍

使用许多小得JS、CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很好的实践。但这样做反过来却损失了网站的性能。虽然你应该将你的Javascript代码写在小文件中并且将大的CSS文件分割到小文件 中,当一个浏览器请求那些JS以及CSS文件,它却将为每一个文件产生一个请求。每一个HTTP请求将导致从你的浏览器到服务器上的一次"往返",从响应 服务器到客户端浏览器之间的等待时间称之为"延时"。因此,如果你有四个JS文件以及三个CSS文件需要被页面加载,你将要等待七次网络上的"往返"。在 本国内,延时平均为70ms。所以总延时为490ms,大概半秒钟。而来自国外的访问,平均延时大概在200ms左右。因此,那意味着1400ms的时间 浪费。而直到CSS与JS文件被完全加载,页面才会被完全地显示出来。所以,越长时间的延时,页面加载地越慢。

延时有多糟糕

这里有一张图片显示了,每一个请求怎样产生了"延时",这些"延时"累加起来显著地影响了页面的加载:

你可以通过使用CDN(Content Delivery Network)来减少等待时间。然而,一个更好的解决方案是使用HttpHandler提供多个文件的一次请求,该HttpHandler整合了数个文 件并且提供了一次输出。所以,代之以许多的<scropt>或者<link>标签,你只需要写一个<scropt> 以及<link>标签,并将它们标记在HttpHandler中。由你来告诉handler哪些文件需要被整合,并且它提供了哪些文件的一次 输出。这省去了从浏览器发出许多请求产生的延时。

这里你能看到如果你把多个JS文件以及CSS文件整合到一个输出里,有怎样的性能提升。

在通常的网页中,你将看到很多的JS引用:

而我们可以仅用一个<script>标签请求整个JS文件的集合,来代替这里的每一个<script>标签:

HttpHandler读取定义在一个配置文件中的文件名,整合所有的那些文件,并将 它们一次响应到客户端。它通过gzip来压缩响应内容以此节约带宽。另外它提供一个带有cache的响应请求头来缓存响应到浏览器的Cache里,使得浏 览器对之后的访问不需要再次请求它。

在请求参数中,你可以用"S"参数标识文件集合的名称,然后用"t"参数来标识content type,然后使用"v"参数来标识一个版本。因为响应被缓存了,如果你修改了文件集合中的任何一个,你将不得不增加参数"v"的值来让浏览器再次下载响应。

使用该HttpHandler,你可以这样来请求CSS文件:

这里列出了你将需要怎样来定义请求的集合,在web.config中:

使用HttpHandler整合器的例子

我构建了一个简单的测试网站来向你展示它的使用,该测试网站有两个CSS以及JS文件。Default.aspx仅使用一个<link>和<script>标签通过HttpCombiner.ashx来请求它们。

下面是Default.aspx文件的内容:

就像你看到的那样,有一个<link>标签向HttpCombiner.ashx发送了一个请求并提供了请求集合的名称——Set_Css,当然还有一个<script>标签请求了一个Set_Javascript的集合。

上面的两个集合都被定义在web.config文件中:

这里列出了Handler如何工作:

(1)????首先,它会从"s"参数中读取文件集合的名称

(2)????然后它从web.config文件中拿到集合的定义

(3)????它读取每一个文件,然后将它们缓存在缓冲区中

(4)????缓冲区然后通过gzip进行压缩

(5)????被压缩后的缓冲区内的内容将被发送到浏览器

(6)????被压缩后的缓冲区内的内容被存储在ASP.NET缓冲中,以让随后的对相同集合的请求能够直接地从Cache中获取数据,而不是从文件系统或外部的URL去读取每一个文件。

Handler带来的好处:

(1)????它减少了网络上的"往返"次数,你把越多的文件放到一个集合中,就越能减少网络延时,它提高了性能。

(2)????它缓存了所有的整合过的压缩响应,因此省去了一次又一次的读取文件系统并压缩它。它提供了可扩展性。

HttpHandler如何工作

首先handler从请求字符串中读取集合名、类型以及版本:

如果要加载的文件集合已经被缓存了,那将直接从cache中写入响应流。否则,文件将被一个接一个地加载,然后被存储在一个MemoryStream。MemoryStream被通过GzipStream压缩(如果浏览器支持压缩输出)。

在整合了所有的文件并压缩后,被整合的字节流被缓存起来,以让随后的请求可以直接地从缓存获取数据。

GetFileBytes方法读取一个文件或者URL,然后返回字节。所以,你可以在你的网站里使用虚拟路径,或者你可以使用URL指向一个宿主在另外的域中的Js/Css文件。

WriteBytes方法有许多技巧在里面。它提供了一个基于是否字节是压缩格式的响应头。然后它提供了一个缓存标识头,让浏览器缓存响应内容。

怎样使用这个handler呢?

  • 包含HttpCombiner.ashx在你的项目中
  • 定义文件集合在你的web.config配置文件的<appSettings>节点中
  • 改 变的<link>与<script>标签,使用HttpCombiner.ashx需要的格 式:HttpCombiner.ashx?s=<setName>&t=<contentType>&v=& lt;versionNo>

原文链接:http://www.codeproject.com/KB/aspnet/HttpCombine.aspx

? ?源代码: http://download.csdn.net/detail/yanghua_kobe/3654006

译者注: 今天在尝试使用该技术时,遇到一个问题。那就是在打包压缩CSS文件时。如果文件中涉及到图片路径(例如background-img的url属性时)。 无法正确请求图片。原因是,通常这些图片都使用的是相对路径。浏览器通常情况下载获取到CSS文件后,会以CSS文件本身作为参考,根据图片的相对路径来 查找图片。而批量打包时,用来参考的路径本身变成了handler的路径,因而会导致查找图片的路径出错而无法下载。其实就算是人为将图片的路径设置成相 对于本handler的相对路径仍然无法下载!

解决方案: 采用绝对路径,但也取决于网站的发布方式。如果发布时新建的网站,那么可以直接通过"/"来从根目录开始表达CSS中的背景图片的绝对路径。因为新建网站 时,可以直接用"/"来标识根目录。而新建虚拟目录时,则需要加入新建虚拟目录的文件夹名。如myweb,则绝对路径表示为"/myweb /images......."这样才能正确地获取图片。

时间: 2024-10-29 19:08:20

asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度的相关文章

django 解决css,js文件304导致无法加载显示问题

这种情况一般会在windows系统下出现 1.前台.后台如果无法加载css等样式.(建议通过此办法来解决) 这是因为你安装的某些IDE 或者其他更改了注册表导致的系统的注册表\HKEY_CLASSES_ROOT\.css的Content Type不是text/css,修改即可.改完记得重启开发服务器并按Ctrl+F5强制刷新页面. 2.前台如果无法加载css等样式.(如果你的后台没问题那就试试这个简单方法) 前提:django1.8 在html页面可以请求道css,js文件并在chrome的开发

html、css、js文件加载顺序及执行情况

今天看书,看到html,css,js加载执行情况,发现自己并不是真正的了解,网上搜了半小时依然未弄明白,就在这时我找到了让我恍然大悟的一段话,如下: HTML页面加载和解析流程 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件. 3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件. 4. 浏览器继续载入html中&

使用Bootstrap.css 中IE下页面加载过慢问题

问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700"); 国内访问不稳定,页面反应慢 解决:将请求结果保存下来,放到本地,重新声明请求 1.请求http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,4

【转】html、css、js文件加载顺序及执行情况

原链接:http://www.cnblogs.com/Walker-lyl/p/5262075.html 今天看书,看到html,css,js加载执行情况,发现自己并不是真正的了解,网上搜了半小时依然未弄明白,就在这时我找到了让我恍然大悟的一段话,如下: HTML页面加载和解析流程  1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件.  2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部

使用gulp自动化打包合并前端静态资源(CSS、JS文件压缩、添加版本号)

现在正在做的项目更新迭代比较频繁,会经常对前端代码打包部署,手动整合代码文件很麻烦并且浪费时间,所以决定使用gulp来代替手工完成这项工作. 前端静态资源在发版更新时会面临客户端浏览器缓存的问题(可参考这篇文章),解决这个问题可以采用两类方法:覆盖方法(引用资源时加版本号,不修改资源文件名).非覆盖方法(修改资源文件名),本篇文章主要采用的是第一种加版本号的方式,主要用gulp给静态资源自动加版本号和压缩CSS.JS. 原理:通过对JS,CSS文件内容进行Hash运算,生成一个文件的唯一Hash

解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题

ASP.NET MVC4,ASP.NET MVC5中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件: <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 将在运行的时候自动将虚拟(相对)路径转换为应用程序绝对路径.这是比较传统的引用方式,尽管他做了一次转换操作,对服务器的请求数量

【转载】IIS7.5(经典模式)访问静态资源(.css和.js文件)提示:未能执行 URL

IIS7.5(经典模式)静态资源(.css和.js文件)提示:未能执行 URL “/”应用程序中的服务器错误. 未能执行 URL. 说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常详细信息: System.Web.HttpException: 未能执行 URL. 源错误: 执行当前 Web 请求期间生成了未处理的异常.可以使用下面的异常堆栈跟踪信息确定有关异常原因和发生位置的信息. 堆栈跟踪: [HttpExce

使用System.Web.Optimization对CSS和JS文件合并压缩

在ASP.NET MVC 中JS/CSS文件动态合并及压缩通过调用System.Web.Optimization定义的类ScriptBundle及StyleBundle来实现. 大致步骤如下: 1.App_Start添加: public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new StyleBundle("~/Themes/Homecss&q

MVC bundle(包扎)CSS或是JS文件

以前写asp.net网页时,会在<head>节点中引用很多样式文件或是javascript文件,如下图左大括号的引用语句. 现在在MVC应用程序中,可以使用使用Bundle来捆一起, 在Solution Explorer窗口应用程序下,找到App_Start目录.在此目录下创建一个类,命名为“BundleConfig.cs” 并修改namespace: Insus.NET 上图中的#11行的蓝下划线的名称,将就是以View应用的名称.接下来,我们打开Global.asax.cs文件,分三步,第