昨天去图书馆借了几本书，今天看了看《高性能网站建设指南》，觉得还不错，不过翻译的不是很好，但还是觉得比较有收获，整本书也就140页左右，总共列出了网站前端优化的14点建议。网站优化大家应该并不陌生，但是真正的在自己的项目里面用过或者了解过吗，我觉得应该打个问号？下面就说说这14条是啥，会有自己的理解，希望大家都能够有收获。
关注前端可以很好的提高网站的整体性能，如果我们可以将后端响应时间缩短一半，整体响应时间只能减少5%-10%，如果优化前端性能，同样是将响应时间缩短一半，那么整体的响应时间可以减少40%-45%。改进前端通常只需要较少的时间和资源；减少后端延迟会带来很大的改动，例如重新设计应用程序的架构和代码，查找和优化临界代码路径，添加改动硬件，对数据库进行分布化等，这些改动需要数周或数月的时间。
书籍里面提到了一条一直重复的网站前端性能黄金法则：只有10%-20%的最终用户响应时间花在了下载HTML文档上，其余的80%-90%的时间花在了下载页面的所有组件上。其实就是要控制好JS，Flash,图片，视频音频（富媒体），CSS文件等的资源加载速度。
1.减少http请求。使用图片地图，CSS Sprites，内联图片和脚本，样式表的合并；大约可以减少50%响应时间。
图片地图
就是在一张图片上做多个链接，多个链接只需要一次http请求即可，因为一张图片是一个请求，而链接都嵌入到图片上面了。在Dreamweaver里面有给图片加热点的画图工具很方便，但是现在很少用DW这样的可视化工具来做链接热点，所以只能用敲代码来做链接热点，未免显得太繁琐，要定好每一个链接的范围（坐标）---客户端图片地图。另外可以用服务器端图片地图，将所有的点击提交到一个目标URL，向其传递用户单击的x,y坐标。个人不是很提倡图片地图（Image Maps）这种方式。
CSS精灵（CSS Sprites）
可以把各种图片合并在一张大图片上面，那么结果就是以前的多次访问，现在只需要一次就可以搞定了。这个技术相信大家应该都用过，现在也比较流行。用F12看一下QQ空间的resoures，他就是用css精灵做的。ps：把各种小图放到大图上面的时候要考虑到小图片之间的间距，要不然可能会出现错位的问题，要仔细考虑html结构代码的块的大小，photoshop或fireworks都可以很放的作图。我也不赘述了，比较简单~
内联图片（Inline images）
通过使用data:URL模式可以在web页面中包含图片但无需任何额外的HTTP请求。---IE6.7不支持
data:一般用于内联图片；由于他是内联在页面中的，在跨越不同的页面的时候不会被缓存，而如果放在外部样式表中也会增加一个额外的http请求。
合并样式表和脚本（Combined JS and CSS）
这个很好理解吧，就是把脚本文件和样式表分别合并起来，书中提到，理想情况下，最多一个脚本文件和最多一个样式表文件。但是在现实的项目中根本不可能，所以只能尽可能的减少文件的数量，一个文件就是一个请求。以前做项目的时候，最基本的就会用到common.css样式作为公共样式，jquery.js作为库来使用，index.css,index.js。。等用来做相应的页面。
2.使用内容发布网络。
内容发布网络（CDN--content delivery network）是一组分布在多个不同地理位置的web服务器，用于更加有效的向用户发布内容。大型的公司一般都有自己的CDN，例如京东，阿里，百度，腾讯等等，在全国都布上自己的服务器，用户访问的时候速度就比较快，而不用依赖一个位置的服务器。
3.添加Expires头。expires==文件，协议，因期而至失效
浏览器使用缓存来减少http请求的数量，并减少http响应的大小，使web页面加载速度更快；web服务器使用expires头来通知web客户端使用一个组件的当前副本，直到副本（也就是缓存）过期。cache-control:max-age=315360000可以来指定日期。简单来说，这就是一种缓存技巧来减少http的请求数量。
4.压缩组建。
显而易见，压缩文件可以减少文件的大小，通常使用gzip或deflate来压缩http响应包，其他的还有删除注释，缩短URL的形式。
web客户端可以通过http请求中的accept-encoding头来标识对压缩的支持。Accept-encoding:gzip,deflate.如果web服务器看到了请求中有这个头，就会使用web客户端列出来的一种方法来压缩响应。
5.把样式表放在顶部（Put stylesheets at the top）。
如果把样式表放在底部在IE中会出现白屏现象：当在新窗口打开的时候new window;重新加载时refresh;作为主页；这三种情况都会导致白屏的产生。
样式表的引入方式link和@import;
<link rel="stylesheet" href="index.css">
<style>
@import url("index.css");
</style>
他们之间存在一定的差别，link的渲染性能好于@import,后者偶尔也会导致白屏现象，而且渲染呈现无序性，没有遵循逐步呈现的原则。
6.把脚本放在底部。
最好将脚本从页面的顶部移到底部，这样页面既可以逐步呈现，也可以提高下载的并行度。
脚本阻塞（Scripts Block Downloads），在下载脚本时并行下载是被禁止的——即使是用了不同的主机名，浏览器也不会启动其他的下载。导致脚本阻塞下载的原因有两个：1.脚本可能是用document.write来修改页面，浏览器需要等待来确保页面正确的布局。2.为了保证脚本能够按照正确的顺序执行，脚本文件之间可能会相互影响。
由于脚本对web页面的影响---阻塞后面内容的呈现，阻塞后面组件的下载。因此把脚本放在底部更好。ps:在引用插件或库的时候，一定要把它们放在所有的js文件的前面。
7.避免CSS表达式。
尽量减少在html标签内添加样式和js代码
8.使用外部js和css。
这一点应该都做到了，不赘述了
9.减少DNS查找。
通常浏览器查找一个给定的主机名的IP地址要花20-120毫秒，在DNS查找完成之前，浏览器不能从主机名那里下载到任何东西。响应时间依赖于DNS解析器所承担的请求压力，两者之间的地理位置距离，带宽速度。
用户的浏览器或操作系统会记录网站的DNS缓存，只是存在期限的问题。查找返回的DNS记录包含了一个存活时间-----Time To Line(TTL)值----告诉客户端可以对该记录缓存多久。
10.精简js,css。
去除代码之间的不必要的空格，字符，换行，制表符。借助工具----Jsmin来压缩
混淆（obfuscation）函数和变量的名字更短，但是代码可能会产生一定程度的混乱。
节省css---合并相同的类，移除不用的类，颜色值的缩写，移除不必要的字符串（如 0和0px;#fff和#ffffff）
11.避免重定向
12.移除重复脚本
13.配置或移除ETag
14.使用Ajax可缓存
后面的四条自己没用过，感兴趣的可以参看http://www.cnblogs.com/developersupport/p/webpage-performance-best-practices.html#js_bottom觉得写的还蛮不错的。