web前端性能优化的14个技巧
平时接触的很多优化都是后台程序或数据库级别的，最近浏览了下《高性能网站建设指南》，学习了下关于前端性能的优化技巧，在此总结下。
一、web页面的性能分析
性能黄金法则：只有10%~20%的最终用户响应时间花在了下载HTML文档上，其余的80%~90%时间花在了下载页面中的所有组件上。
这里的组件包括js，图片，样式表，flash等
二、具体优化规则：
规则1：减少HTTP请求
具体措施：
1.图片地址（Image Map）——一张图片上点击不同的地方触发不同的链接
2.CSS sprites（合并图片）——将多幅图片合并为一幅单独的图片。
3.内联图片——使用data：URL模式将图片数据直接放在URL中
4.合并脚本和样式表——采用外部脚本和样式表相比内联对性能更有利，但是过多的脚本和样式会增加额外的HTTP请求
规则2：使用内容发布网络
内容发布网络：一组发布在多个不同地理位置的web服务器，用于更加有效地向用户发布内容。
缺点：受网络（CDN）影响很大。主要用于发布静态内容，如图片、脚本、样式表和flash。
规则3：添加Expires头(缓存时间的控制)
主要是针对浏览器对组件的缓存问题。
除了Expires头还可以设置Cache-Control max-age头。
设置的对象，应该包含任何不经常变化的组件，包括脚本，样式表和flash组件。
规则4：压缩组件
通过减小HTTP响应的大小来减少响应时间。
web客户端可以通过请求中的 Accept-Encoding头来识别对压缩的支持。
web服务器通过响应中的 Content-Encoding头来通知web客户端。
目前主流的压缩方式是：gzip。 采用Conten-Encoding：gzip
压缩的对象：主要是脚本和样式表
注意:图片和PDF不应该压缩，因为他们本来就已经压缩了。
压缩的成本：服务端会话费额外的CPU周期来完成压缩，客户端要对压缩文件进行解压缩。
要检测收益是否大于开销。
规则5：将样式表放在顶部head中，并且使用link加载，而不要使用@import加载
逐行呈现：为了避免当样式变化时重绘页面中的元素，浏览器会阻塞内容逐步呈现。
放在底部容易出现的问题：白屏和无样式内容的闪烁。
页面逐步呈现的，如果使用样式表，页面逐步呈现就会被阻止，知道所有的样式表下载完成。
这就是将样式表放在head中的原因。
规则6：将脚本放在底部
使用脚本时，对于所有位于脚本一下的内容，逐步呈现都被阻塞了。将脚本放在页面越靠下的地方，意味着越多的内容能够逐步地呈现。
规则7：避免CSS动态表达式
css表达式是动态设置CSS属性的一种强大（并且危险）的方式。
规则8：使用外部JavaScript和CSS
单纯来讲，内联更快一些。但是外置能很好的支出组件重用。避免了统一组件的反复加载。
规则9：减少DNS查找
使用keep-Alive通过重用现有连接避免了重复的DNS查找。
规则10：精简javaScript
精简（Minification）是从代码中移除不必要的字符以减小其大小，进而改善加载时间的实践。
不但内联脚本可以精简，内联脚本也能精简。
精简工具：JSMin
精简CSS带来的节省通过小于精简javascript
规则11：避免重定向
规则12：移除重复脚本
在一个页面中两次包含同一个javascript和css文件会损伤性能。
规则13：配置ETag（实体标签）
规则14：使ajax可缓存
经总结不难发现，这些措施主要是减少网络请求，减少HTTP响应的大小，html页面加载顺序，组件的缓存这些方面来提高页面响应的时间。
