提高页面加载速度的若干方式

技术上由两种情况决定页面加载速度及显示效果，一个是Html相关导致的一个是后台Asp.net后台逻辑影响的页面显示速度，下面列的是Html代码对页面加载效率的影响，对于后台逻辑对页面加载的影响主要要遵循我们的代码规范来保证效率问题。

a.     支持IE6、IE7、Firefox

b.    近可能采用XHtml标准，另外界面尽量采用Div+CSS方式来进行布局。

c.     控制页面大小-页面过大导致增加页面的加载时间影响页面在最终用户处的显示效果

根据W3C的标准来优化HTML代码结构，去除一些垃圾无意义的代码

d.    降低页面连接数是非常有必要并且非常有效的办法。能统一到一个文件里面的尽量统一到一个文件里面，比如js和css等

e.     Gzip压缩

那HTTP/1.1来说，浏览器可以在HTTP 请求中指定压缩的方式，比如【Accept-Encoding:gzip,deflate】,那么服务器就就知道浏览器可以通过【Content-Encoding:gzip】压缩。

Gzip可以减少回应的数据到70％，而且今天通过浏览器的网络传输，有90％支持Gzip，你可以用Gzip来搞HTML文档，样式表，XML，JSON等等。然而图片和PDF不可以用GZip，他们已经被压缩了

f.    把样式表放在最上面

g.   把Script放的尽可能下一点

h.   避免使用CSS Expressions

比如【background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );】

这样的语句被调用的次数远远超过用户的想象，它不仅仅在页面加载和Resize的时候被调用，而且当滚动条滚动，甚至鼠标在页面上移动的时候，都会被调用，这样会产生上万次调用造成性能下降

i.    把JavaScript和CSS从HTML里面分离出来

在HTML里面写的JavaScript和CSS在每次请求页面的时候都会被下载，而分离的JavaScript将被浏览器Cache住，这样的好处就是不会重复下载而减少HTTP请求的次数

j.    压缩JavaScript

可以使用工具JSMin和YUI Compressor来进行JS压缩

k.   避免使用Redirects

Redirect通常使用301和302状态码，下面是一个301回应的例子

      HTTP/1.1 301 Moved Permanently

      Location: http://example.com/newuri

      Content-Type: text/html

浏览器将自动把用户带到对应的页面去

主要的问题是Redirects减慢用户体验的速度。在HTML文档中加入Redirect，那样的页面在得到新的HTML之前什么也不会做

l.    移走重复的JS代码

不要在页面中使用两次<script src="example.js"></script>两次，它将增加页面结果奇怪的风险。

在IE中同样的JS请求将被请求两次，而在Firefox中，第一次请求的时候，它已经被Cache住，所以只被请求了一次。

m. 配置Etags

Entity Tags（ETags）是一种服务器和浏览器检查元素是不是在浏览器的Cache中的一种机制，它是通过last-modified data来验证的。一个ETage是唯一标识元素Version的字符串，比如下面的回应头

      HTTP/1.1 200 OK

      Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT

      ETag: "10c24bc-4ab-457e1c1f"

      Content-Length: 12195

以后，如果浏览器必须验证这个元素，它可以用IF－NONE－Match传递到这个服务器，如果匹配，一个304的状态码被返回从而减少了12195个字节的传输

      GET /i/yahoo.gif HTTP/1.1

      Host: us.yimg.com

      If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT

      If-None-Match: "10c24bc-4ab-457e1c1f"

      HTTP/1.1 304 Not Modified

问题是ETags必须用一个服务器来处理所有的服务，如果一台服务器给的Etag需要在另一台服务器上验证，那么将通不过

所以，当你的ETags不匹配的时候，你的客户将得不到304的状态码而是必须从新返回200字节左右的回应，然后问题还不仅仅与此，如果你的服务不是建立在一台服务器而是多台，那么，你的用户将得到相当慢的反应，你的服务症消耗恨道的贷款，Proxies也不能有效的Cache你的上下文。不管你的元素是不是有个Expires Header，不管你的用户是Reload还是Refresh，Get请求还是被发了出去

所以你不能享受ETags带来的方便，那么就把他们统统移开，在Apache中，你可以这样配置【FileETag none】