读书笔记:高性能网站建设进阶指南
第7章 编写高效的JavaScript
1 管理作用域
标识符在作用域链中的位置越深,查找和访问它所需要的时间就越长;
局部变量是JavaScript中读写最快的标识符。 全局变量对象始终是作用域链中的最后一个对象,所以对全局标识符的解析总是最耗时的。
原则:尽可能的使用局部变量。任何非局部变量在函数中使用超过一次时,都应该将其存储为局部变量。
如:在函数中如果多次调用全局变量document,则应该在函数中定义:var doc = document;
基于V8 JavaScript引擎的Google Chrome和基于Nitro JavaScript引擎的Safari 4+的存取速度超快,标识符深度的影响微乎其微了。
2 高效的数据存取
读取局部变量的速度快于数组元素和对象属性。
如:循环的时候,for (var i=0; i < data.count; i++) 应该改成 var count = data.count; for (var i=0; i < count; i++);
随着数据结构深度的增加,数据存储速度也跟着变大。
如:存取data.count 比 data.item.count 快。
在数据存取时,将函数中使用超过一次的对象属性或数组元素存储成局部变量是个好方法。
对于大多数浏览器来说,存取对象属性使用点符号(data.count)还是方括号(data["count"])几乎没有差别,但是Safari是例外,在Safari中使用方括号明显比点符号慢。
数组元素和对象属性的读取速度因浏览器而异。有的读取数组快,有的反之。
对DOM的操作特别要注意:
var divs = document.getElementsByTagName("div");
for (var i=0; i< divs.length; i++) //该方式要避免,因为每次都要查询DOM
应该再增加一个步骤:len = divs.length 。
操作DOM对象的开销总是比非DOM对象要大,HTMLCollection对象则是DOM中性能最糟糕的。如果要对HTMLCollection对象的成员反复存取,最高效的方法是先将它们复制到一个数组中。