前端性能优化准则：
一、减少http请求。
措施：合并小图片，css控制背景图。合并CSS，合并JS
二、使用CDN（Content Deliver Network 内容分发网络）发布静态资源。
三、启用压缩组件。
response header:Content-encoding
request header:Accept-encoding
四、添加Expires响应头。
response header:Expires(指定过期时间)
缺点：1.需要指定具体的过期日期，时间到后需要重新指定。2.服务端客户端时钟必须一致。
http 1.1 引入Cache-Control:max-age 指定秒数解决该问题。
五、head 引入样式文件。
解决：白屏，闪屏问题。浏览器加载无样式DOM有两种策略：
1、先渲染无样式dom树，发现样式文件后重新加载，引起闪屏问题。
2、延迟渲染dom树直到发现样式文件，加载完样式文件后再加载dom树，引起白屏问题。
六、底部引入脚本文件。
早期浏览器（IE67），JS文件的下载会禁用浏览器的并行下载特性（http 1.1 规定浏览器可同时发起2个http链接），IE8以后浏览器可以并行下载多个脚本，但是由于并发的http连接数是有限的，所以依然会阻塞其它资源的下载，原因：
1、浏览器无法判断脚本中是否有document.write改变dom结构。
2、浏览器为了保证脚本的执行顺序。
脚本的并行下载是必要的，但必须保证执行顺序，保证执行顺序的措施：
1、IE浏览器的defer属性
2、动态创建script dom，并同时绑定onload，onreadystatechange（IE浏览器不支持onload，需要同时判断script dom的readyState的是是否等于loaded或者complate，有时候状态值会不经过loaded状态直接变为complete，而有时候变为loaded后并不切换到complate）事件。
3、document.write 脚本
七、精简CSS 脚本。
八、删除重复脚本。
九、减少DNS查询。
技巧：使用link标签的ref="dns-prefetch"类型，用于提前dns解析和缓存域名主机信息，以确保将来再请求同域名的资源时能够节省dns查找时间。例如淘宝主页：
十、自定义Etag。
Etag的格式与web容器是耦合的，站点在服务器集群（多种web容器）下导致Etag值不一致，命中率很低。两种方案：
1、禁用Etag
2、自定义Etag
十一、缓存Ajax
下面这篇文章提供了不一样的思路来优化浏览器对静态资源的加载，比如利用LocalStorage缓存文件，link标签预加载资源等：
http://www.infoq.com/cn/articles/browser-resource-loading-optimization?utm_source=infoq&utm_medium=popular_links_homepage
非阻塞式加载脚本技术对比：
http://www.cnblogs.com/yslow/archive/2009/04/28/1445597.html
构建高性能JavaScript应用,布布扣,bubuko.com
构建高性能JavaScript应用
原文：http://www.cnblogs.com/hellohuman/p/3852228.html
