天天看点

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

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

  好了,要正式开始了!

  一、合并文件请求(以css文件为例说明,js文件一样处理)

我们常会将网页上的css存放在css文件中,然后引入到网页中,那么加载网页时浏览器会针对每一个文件的引用生成请求。请求的建立会耗费一定的带宽资源

和时间并占用一定的服务器资源,如果请求数目过多,网页的加载速度会变慢。有一种方法是将多个css文件合并成一个文件,这样不仅容易发生样式间的冲突、

后期维护困难,还有会造成加载无用样式数据的可能。而以下方法通过一个中间层处理css文件的请求,达到合并文件请求又不用合并css文件的作用。(监测

工具:httpwatch)

  未优化时:

default.aspx

style1.css

style2.css

页面首次加载结果:

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

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

优化后:

defalut.aspx

<code></code>

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

<code>style2.css</code>

<code>页面首次加载结果:</code>

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

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

<code>优化后:</code>

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

<code>未优化:</code>

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

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

继续阅读