网页优化系列一:合并文件请求(asp.net版)

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

  首先推荐一篇十分全面的网页优化文章

  好了,要正式开始了!

一、合并文件请求(以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样式解释时才发出请求,而中间层处理占用一定的时间,延后了图片的请求,所以完成最后一个图片的请求也有所延迟。尝试不加载图片:

优化后:

未优化:

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

下一篇:网页优化系列二:使用Cache缓存静态文件、图片(asp.net版)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏分布式系统进阶

Kafka重置消费的OffsetKafka源码分析-汇总

4792
来自专栏鸿的学习笔记

索引

最简单的索引策略就是:将key值的offset存入在内存,使用hash表进行管理,在搜索时,会先根据key值找到offset,进而由offset找到对应的v...

1345
来自专栏我是业余自学C/C++的

汇编语言-第二章 寄存器(CPU工作原理)

1532
来自专栏james大数据架构

eclipse中关联文件设置方法

在前几次的试验中,只是做了处于应用程序最上层的界面设计,其实还不知程序在运行过程中到底调用了哪些函数,这些函数是怎么实现的,由于搭建环境时没有进行文件关联,所以...

1978
来自专栏python学习之旅

Python django框架笔记(三):django工作方式简单说明和创建用户界面

2197
来自专栏用户2442861的专栏

recv函数说明返回值

客户端的程序连接上服务器后recv函数阻塞接受,有时会返回0,说明接收超时服务器主动断开了连接,需要重新connect服务器,但重新connect时会报“Tr...

4091
来自专栏Java架构师历程

数据库连接池

官方:数据库连接池(Connection pooling)是程序启动时建立足够的数据库连接,并将这些连接组成一个连接池,由程序动态地对池中的连接进行申请,使用,...

3252
来自专栏后端技术探索

7个角度进行nginx性能优化

在大多数情况下,一个常规安装的Nginx对网站来说已经能很好地工作了。然而如果想挤压出Nginx的性能,就需要了解哪些指令会影响Nginx性能,在本文中将解释N...

1442
来自专栏数据和云

【12.2新特性】In-Memory列存储的FastStart管理

启用IM列存储时,In-Memory FastStart通过将IMCU直接存储在磁盘上来优化IM列存储中数据库对象的数量,使数据库通过将列数据存储在磁盘上更快地...

3589
来自专栏遊俠扎彪

如何解决MySQL中文乱码及插入中文信息错误的问题

从前和最近,帮人做点东西的时候,都遇到过MySQL与中文不兼容的问题,从前都是凭借尝试与运气解决问题这次好好总结一下:

2046

扫码关注云+社区

领取腾讯云代金券