提高网页效率的14条准则

第一条 尽可能的减少HTTP的Request请求数

    80%的用户响应时间都是浪费在前端。而这些时间主要用于下载图片、样式表、JavaScript脚本、flash等文。减少这些资源文件的Request请求数将是提高网页显示效率的重点。

    1、用一个大图片代替多个小图片    2、合并css文件    3、合并javascript文件

第二条 使用CDN

    根据不同的地理位置增设服务器以加快网络访问。

第三条 添加Expores头

    充分使用浏览器缓存，设置文件过期时间。设置了Expires头的内容在过期前浏览器不会从服务器端重新下载。

第四条 压缩组件

    对传输的内容采用gzip压缩，可以显著减少传输时间。尤其是文件较大的js文件、css样式表压缩能收到显著的效果。

第五条 把CSS样式放在页面的上方

    无论是HTML还是XHTML还是CSS都是解释型的语言，而非编译型的。所以CSS到上方的话，那么浏览器解析结构的时候，就已经可以对页面进行渲染。这样就不会出现，页面结构光秃秃的先出来，然后CSS渲染，页面又突然华丽起来，这样太具有“戏剧性”的页面浏览体验了。

第六条 将脚本放在底部

   

    原因同第五条一样。只是脚本一般是用来于用户交互的。所以如果页面还没有出来，用户连页面都不知道什么样子，那谈交互简直就是扯谈。所以，脚本和CSS正好相反，脚本应该放在页面的底部。

第七条 避免使用CSS表达式

    首先有必要先说明一下CSS Expressions是什么一个东西。其实它就像其它语言中的if……else……语句。这样在CSS中就可以进行简单的逻辑判断了。举个简单的例子——

1. <style>
   
2. input{background-color:expression((this.readOnly && this.readOnly==true)?"#0000ff":"#ff0000")}
   
3. </style>
   
4. <INPUT TYPE="text" NAME="">
   
5. <INPUT TYPE="text" NAME="" readonly="true">

复制代码

这样css就可以根结一些情况分别使用不同的样式了，但是CSS中Expressions 的代价却是极高的。当你的页面需要根据判断来渲染效果的元素很多的时候，那么你的浏览器将长期处于假死状态，从而给用户带来极差的用户体验。

第八条 使用外部javascript和css

    纯粹而言，内联CSS和JS要快一些，但外部CSS和JS文件有机会被浏览器缓存起来，当一个页面被重复访问时，就不需要重复下载外部CSS和JS了。
    你的网页究竟是使用外部还是内联的CSS和JS？
    这个问题要根据你网页的实际情况而定。关键点在于：

    1、 页面查看的数量
    2、页面缓存（空缓存 VS 完整缓存）
    3、组件（css或js）的重用率

第九条 减少DNS查找

   1、如果不是必须，请不要把网站放到两台服务器上。
    2、网页中的图片、css文件、js文件、flash文件等等，不要太多的分散在不同的网络空间中。这就是为什么那种只发一个网站中的壁纸图片的帖子，要比壁纸图片来源于不同网站的帖子显示要快得多的原因。

第十条 精简JavaScript和CSS

    在你的最终发布版本中把没有必要的空行、空格和注释全部去掉。

第十一条 避免重定向

    重定向用于将用户从一个URL重新路由到另一个URL，它会使你的页面变慢。
    重定向有很多种，“301 Moved Permancenty”和“302 Moved Temporarily (也叫 Found)”是最常用的两种。

    有一种重定向很频繁和浪费，那就是URL的结尾必须出现斜线(/)而没有出现时。

第十二条 移除重复的脚本

    导致重复脚本的因素：团队大小和脚本数量。
    避免重复脚本的一种方法是：实现一个脚本代码管理模块（用javascript编写避免重复加载.js文件的代码）。

第十三条 配置ETag

    ETag，全称为：Entity Tag，意思是实体标签，从名字上看，是对于某种实体的一个标识。它属于HTTP协议的一部分，也就是所有的Web服务器都应该（也确实能）支持这个特性。它的作用是用一个特殊的字符串来标识某个资源的“版本”，客户端（浏览器）来请求的时候，可以比较，如果ETag一致，则表示该资源并没有修改过，客户端（浏览器）可以使用自己缓存的版本。

ETag与其他技术的比较

响应标头	优势和特点	劣势和可能的问题
Expires	1. HTTP 1.0就有，简单易用。 2. 服务器通过这个Header告诉浏览器，某资源直到某个时间才会过期，所以在没有过期之前，浏览器就直接使用本地的缓存了。	1. 因为这是时间是由服务器发送的（UTC），但如果服务器时间和客户端事件存在不一致，可能会有些问题。 2. 可能存在版本的问题，因为如果在到期之前修改过了，客户端是不会知道的。 3. Cache-Control中的max-age可以实现类似的效果，但更加好，因为max-age是一个以秒为单位的时间数，而不是具体的时间，所以不存在上面提到的第一个问题。
Cache-Control	1. 服务器通过一个Header（Last-Modified）告诉浏览器，某资源最后修改的时间。 2. 浏览器在请求的时候，包含一个Header（If-Modified-Since）,然后服务器可以进行比较，如果在该时间后没有修改过，则返回304。 3. 它比Expires多很多选项设置。	Last-Modified 也是一个时间，但该时间只能精确到秒，如果在同一个秒中有多次修改（这个在现在的环境下应该确实是可能的），则可能会发生问题。
ETag	1. 可以更加精确地判断资源是否被修改，因为它不是一个时间值，而是对时间经过处理的一个长整型数值（当然具体算法我们目前还不得而知）。 2. 浏览器发起新请求时需要包含 If-None-Match。	1. 如果部署在服务器场环境中，配置不当的话，可能每个服务器会对相同的资源生成不一样的ETag，这样就增加了重复下载的可能性。要理解这个问题的原因，以及如何解决，请参考这里的文档：http://support.microsoft.com/kb/922703/en-us 2.  该问题在IIS 7以及以后的版本中应该不存在了

这几个技术其实很多时候是会结合起来用的，而且优先级也有所不同。通常，ETag是优先于Cache-Control的，而Cache-Control又是优先于Expires的。

第十四条 使Ajax可缓存

    下面这些原则同样可以应用在Ajax的场景中：
    对资源添加缓存控制
    对资源启用压缩
    减少DNS查找的次数
    最小化JAVASCRIPT和CSS
    避免重定向
    配置ETags

什么样的AJAX请求可以被缓存？

    对于AJAX而言，有一些特殊性，并不是所有的AJAX请求都是可以缓存的。这是由于AJAX的请求通常有两种不同的方法：POST和GET。他们在进行请求的时候，就会略有不同。

    1、POST的请求，是不可以在客户端缓存的，每次请求都需要发送给服务器进行处理，每次都会返回状态码200。（这里可以优化的是，服务器端对数据进行缓存，以便提高处理速度）

    2、GET的请求，是可以（而且默认）在客户端进行缓存的，除非指定了不同的地址，否则同一个地址的AJAX请求，不会重复在服务器执行，而是返回304。

以上总结自书籍《高性能网站建设指南》，