构建高性能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 指定秒数解决该问题。
构建高性能JavaScript应用
    构建高性能JavaScript应用
五、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查找时间。例如淘宝主页:
构建高性能JavaScript应用
构建高性能JavaScript应用
十、自定义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应用

上一篇:杂谈X509证书, Java Keystore与Jetty


下一篇:Spring Bean的序列化方案