构建高性能网站：前端技术

使用前端技术构建高性能网站方法整理

减少HTTP请求

通过图片地图来加载多个图标，CSS Sprites来合并图片，使用内联图片，合并JS脚本和CSS样式表来实现减少HTTP请求次数。

使用内容发布网络(CDN)

将静态文件(css,js,图片等)存放在第三方的服务器里，可以减少用户和资源的距离，从而减小响应时间。
使用CDN会增加页面的不可控性：若CDN服务器崩掉或文件丢失、更改，均会使页面不可正常使用。

使用浏览器缓存、减少HTTP请求大小

使用Expires头告诉客户端它可以使用一个组件的当前副本，直到指定的时间为止。还可以通过添加Cache-Control:max-age=32323234来实现。

压缩组件

通过减小HTTP响应的大小能显著减少响应时间。Web客户端可以通过HTTP请求中的Accept-Encoding头来表示对压缩的支持。

将样式引用放在头部

页面是逐步加载的如果CSS放在页底，会出现白屏问题和FUNC（Flash of Unstyled Content）问题。最好的做法是使用link标签将样式表放在文档的head中。

将js脚本引用放在底部

JS脚本是会阻塞页面加载的，将脚本放在底部既不会影响页面内容的逐步呈现，又可以提高下载的并行度。

使用外部的JavaScript和CSS

如果页面被访问的次数少，使用内联脚本和样式表，对性能影响不大。但是如果页面是首页或是会被频繁的使用到，那么内联脚本和样式表会是一个很大的负担。从全部页面来看，外联的JS和CSS文件会更好。

减少DNS查询

Internet是通过IP来查找服务器，但是IP对于用户来说是难以理解的一串数字，因此我们需要域名，但是解析域名时我们又需要DNS。在用户访问我们的域名时，DNS需要解析成IP，然后再去访问IP对应的服务器，这个过程是漫长的，特别是页面上资源比较多，并且对应多个不同主机下的时候。最好的做法是减少唯一主机名的数量，从而减少DNS。

精简JavaScript、避免重定向、删除重复脚本

使Ajax可缓存

Ajax的目的是为了突破web本质的开始-停止交互方式。因为Ajax是异步的，因此会造成在请求时，需要用户等待。如果是Ajax主动请求，这种等待是必需的。如果是被动请求的就可以省去等待时间。最好的做法是在大数据量请求时用被动请求，同时结合其它的方法，使得Ajax请求数据可缓存。

YSlow 规则：
http://blog.csdn.net/chchmlml/article/details/6825341