构建高性能JavaScript应用

前端性能优化准则：

一、减少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