Web前端优化规则

1、Make Fewer HTTP Requests （尽可能减少http请求数）

http请求是要开销的，减少请求数可以提高网页加载速度。常用的方法，合并css，js以及 Image maps和css sprites等。（css sprites是指只用将页面上的背景图合并成一张，然后通过background-position来取背景。）

2、Use a Content Delivery Network （使用CDN 内容分发网络)

通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的 cache服务器内，通过DNS负载均衡(可选根据时间或访问速度来决定访问哪台服务器资源)的技术，判断用户来源就近访问cache服务器取得所需的内容。这样可以有效减少数据在网络上传输的时间，提高速度。

3、Add an Expires Header（添加Expires/catch-control头）

现在越来越多的图片，脚本，css，flash被嵌入到页面中，当我们访问他们的时候势必会做许多次的http请求。其实我们可以通过设置 Expires header来缓存这些文件。Expire其实就是通过header报文来指定特定类型的文件在览器中的缓存时间。大多数的图片，flash在发布后都是不需要经常修改的，做了缓存以后这样浏览器以后就不需要再从服务器下载这些文件而是而直接从缓存中读取，这样再次访问页面的速度会大大加快。
不过期间也有过问题，特别是对于脚本过期时间的设置还是应该仔细考虑下，不然相应的脚本功能更新后客户端可能要过很长一段时间才能“感知”到这样的变化。所以，哪些应该缓存，哪些不该缓存还是应该仔细斟酌一番。

4、Gzip Components（启用gzip压缩）
Gzip的思想就是把文件（  html ,php, js, css, xml, txt…）先在服务器端进行压缩，然后再传输。这样可以显著减少文件传输的大小。传输完毕后浏览器会重新对压缩过的内容进行解压缩，并执行。

5、Put Stylesheets at the Top(将css放在页面最上面)

6、Put Scripts at the Bottom（将script放在页面最下面）
将脚本放在页面最下面的目的有那么两点： 1、因为防止script脚本的执行阻塞页面的下载。在页面loading的过程中，当浏览器读到js执行语句的时候一定会把它全部解释完毕后在会接下来读下面的内容。 所以放在页面最后，可以有效减少页面可视元素的加载时间。        2、 脚本引起的第二个问题是它阻塞并行下载数量。

7、Avoid CSS Expressions（避免在css中使用表达式）
css表达是的执行次数是远远多于我们想象的，往往会严重地影响性能。而且，它只能在IE中执行。所以因尽量地避免它，其实大部分可以用js实现。

8、Make JavaScript and CSS External（把javascript和css都放到外部文件中）
不仅从性能优化上会这么做，用代码易于维护的角度看也应该这么做。把css和js写在页面内容可以减少2次请求，但也增大了页面的大小。如果已经对css和js做了缓存，那也就没有2次多余的http请求了。

9、Reduce DNS Lookups（减少DNS查询）
在Internet上域名与IP地址之间是一一对应的，域名（kuqin.com）很好记，但计算机不认识，计算机之间的“相认”还要转成ip地址。在网络上每台计算机都对应有一个独立的ip地址。在域名和ip地址之间的转换工作称为域名解析，也称DNS查询。一次DNS的解析过程会消耗20-120毫秒的时间,在dns查询结束之前，浏览器不会下载该域名下的任何东西。所以减少dns查询的时间可以加快页面的加载速度。yahoo的建议一个页面所包含的域名数尽量控制在2-4个。

10、Minify JavaScript（压缩 JavaScript）
压缩js和css的左右很显然，减少页面字节数。容量小页面加载速度自然也就快。而且压缩除了减少体积以外还可以起到一定的保护左右。这点我们做得不错。常用的压缩工具有JsMin、YUI compressor等。另外像 http://dean.edwards.name/packer/ 还给我们提供了一个非常方便的在线压缩工具。压缩带来的一个弊端就是代码的可读性没了，但是在调试的时候，工具可以将其复原，也就是调用本地的。

11、Avoid Redirects（避免重定向）

发生重定向的原因很多，比如跳转后面缺少 /等，每增加一次重定向就会增加一次web请求，所以因该尽量减少。

12、Remove Duplicate Scripts （移除重复的脚本）

13、Configure ETags（配置实体标签（ETags））
使用ETags减少Web应用带宽和负载

14、Make Ajax Cacheable（使 AJAX 缓存）

做ajax请求的时候往往还要增加一个时间戳去避免他缓存。It's important to remember that "asynchronous" does not imply "instantaneous".（记住“异步”不是“瞬间”这一点很重要）。记住，即使AJAX是动态产生的而且只对一个用户起作用，他们依然可以被缓存。