Notes of 《Even Faster web site》- 2

接上一篇:http://web2.0coder.com/archives/549

Chapter 6, 布置行内脚本

行内脚本(inline script: 直接包含在HTML文档中的javascript)会阻塞下载和渲染,解决方案:1,把脚本移到底部(并行下载,但会阻塞渲染);2,使用异步回调启动JS的执行 (window.onload = longCode(),并行下载和渲染);3,使用script的defer属性(并行下载和渲染)。

当inline script在css之后时,浏览器要在css完全下载后才能执行inline script,因为inline script中可能含有依赖于css的代码。所以,在样式表后面的inline script会阻塞所有后续资源的下载。方案是调整inline script的位置,使其不出现在样式表和任何其他资源之间。

 

Chapter 7, 编写高效的JS

* 使用局部变量:局部变量是js中读写最快的标示符,读取变量值的总耗时随着查找作用域链的逐层深入而不断增长。

任何非局部变量在函数使用的次数超过1次时,都应该将其存储为局部变量。(var doc = document),全局变量对象始终是作用域中的最后一个对象,所以对全局标示符的解析总是最耗时的。

* if语句,当有多个条件时,讲条件拆成几个分支,例如 if (i < 6) { if (i < 3 ) { if (i==1) … 类似二分查找。

Screen Shot 2013 08 02 at 下午3 37 47

* 优化循环:查找属性比存取局部变量值更耗时,for (var i = 0; i < arr.length; i++) ==> var len = arr.length; for ( var i = 0; i < len; i++)

另一种方法是将循环变量递减到0,而不是递增到总长度,for (var i = len; i–;) {process(arr[i])} 这种改变可以比原来节约大概50%的时间。

* 避免for-in 循环,因为它需要从一个特定的对象中解析每个可枚举的属性。

* 将字符串链接+改为数组的join。

* js是单线程的语言,当js执行时,用户的交互会被锁死。一般而言,脚本运行时间不应超过100毫秒。

 

Chapter 8 – 可伸缩的Comet

comet daily: http://cometdaily.com/maturity.html

 

Chapter 9 – Beyond Gzipping

对于没有在http request 头里包含Accept-Encoding头的请求来说,优化措施:

1,最小化未压缩文件的尺寸:js使用事件绑定ele.onclick = ,或在父元素上指定(事件会冒泡到父元素,然后根据e.target获取被点击的元素,对于列表很有效);使用相对URL;移除空白;移除属性的引号;避免行内样式;为js变量设置别名。

2,对Gzip支持进行直接探测。使用iframe包含一个不会被cache而且页面内容经过gzip的页面,其中header里包含一个cookie,如果浏览器支持gzip,那么会成功解压并设置cookie,那么我们可以在后续的http请求中通过这个cookie知道浏览器支持gzip

 

 

 

 

 

 

 

 

0 comments:

Leave a Reply

Your email address will not be published. Required fields are marked *