网页优化系列一：合并文件请求（asp.net版）

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

最近因公司需要对网站的优化处理学习了一番，现在借本系列博文与大家分享一下自己的学习成果，有纰漏处请大家多多指正。

首先推荐一篇十分全面的网页优化文章：http://developer.yahoo.com/performance/rules.html

好了，要正式开始了！

一、合并文件请求（以css文件为例说明，js文件一样处理）

我们常会将网页上的css存放在css文件中，然后引入到网页中，那么加载网页时浏览器会针对每一个文件的引用生成请求。请求的建立会耗费一定的带宽资源和时间并占用一定的服务器资源，如果请求数目过多，网页的加载速度会变慢。有一种方法是将多个css文件合并成一个文件，这样不仅容易发生样式间的冲突、后期维护困难，还有会造成加载无用样式数据的可能。而以下方法通过一个中间层处理css文件的请求，达到合并文件请求又不用合并css文件的作用。（监测工具：HttpWatch）

未优化时：

default.aspx

 1 <html>
 2  <head>
 3   <link rel="stylesheet" type="text/css" href="styles/style1.css"/>
 4   <link rel="stylesheet" type="text/css" href="styles/style2.css"/>
 5  </head>
 6  <body>
 7   <div class="div1"></div>
 8   <div class="div2"></div>
 9  </body>
10 </html>

style1.css

1 .div1{
2     width:500px;
3     height:100px;
4     border:solid 1px red;
5     background:url(../images/back.gif)
6 }

style2.css

1 .div2{
2     width:600px;
3     height:100px;
4     border:solid 1px black;
5     background-color:red
6 }

页面首次加载结果：

很明显，发出了两个请求来获取css文件。下面用一个请求来获取两个css文件。

优化后：

defalut.aspx

1 <html>
2  <head>
3   <link rel="stylesheet" type="text/css" href="CssRequestHandler.aspx?p1=styles/style1.css&p2=styles/style2.css"/>
4  </head>
5  <body>
6   <div class="div1"></div>
7   <div class="div2"></div>
8  </body>
9 </html>

其中CssRequestHandler就是处理css请求的中间层，将要请求的css文件路径以参数的形式发送到服务器端。注意点：此处的参数名必须不同，如果使用相同的参数名的话中间层的处理代码会有一点不同。

CssRequestHandler.ashx

 1  public void ProcessRequest (HttpContext context) {
 2   context.Response.ContentType = "text/css";
 3   int pCount = context.Request.QueryString.Count;//参数个数
 4   string path = string.Empty;//文件路径
 5    
 6    for(int i=0; i<pCount; ++i)
 7    {
 8     path = context.Request.PathMap(context.Request.ApplicationPah+"/"+context.Request.QueryString[i]);
 9     TextReader tr = StreamReader(path);
10     context.Response.Write(tr.ReadToEnd()+"\n");
11      tr.Close();
12      tr.Dispose();
13    }
14  }

style1.css

1 .div1{
2     width:500px;
3     height:100px;
4     border:solid 1px red;
5     background:url(images/back.gif)
6 }

注意点：background属性中图片url跟之前的不同，因为用该方式合并请求获取的css文件犹如把css样式嵌套到html文件中，所以相对路径要以html页面文件的相对路径为准。

style2.css

1 .div2{
2     width:600px;
3     height:100px;
4     border:solid 1px black;
5     background-color:red
6 }

页面首次加载结果：

与未优化对比，发送和接收的数据量都减少了。但Time却增大了，推断是因为图片要等css样式解释时才发出请求，而中间层处理占用一定的时间，延后了图片的请求，所以完成最后一个图片的请求也有所延迟。尝试不加载图片：

优化后：

未优化：

可发现无论从发送和接收的数据量还是页面请求的时间上看，优化后的页面加载速度都有所提升。

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

[导入]asp.net数据库操作类发布时间：2022-07-10

总结：今天在MSNGroup里面和一些朋友谈ASP.net程序的性能优化发布时间：2022-07-10

客服电话

电子邮件

网页优化系列一：合并文件请求（asp.net版）

请发表评论

全部评论

上一篇：

下一篇：

关于我们

产品与服务

解决方案

139-2527-9053