在JS性能优化中,有一个常见的小优化,即
// 不缓存
for (var i = 0; i < arr.length; i++) {
...
}
// 缓存
var len = arr.length;
for (var i = 0; i < len; i++) {
...
}
第二种方式是大多数的程序猿推荐的一种写法,据说是有利于性能提升,本人没有检测过,但是找到一篇相关文章:http://www.crimx.com/2015/04/21/should-array-length-be-cached-or-not/大家可以参考该作者的一些意见。另外确实不是一个优雅的写法,这点我是同意的。 那么,我们就应该摒弃这种写法吗?不是的,还有另外一种情况,必须使用这种写法。 请看栗子:var divs = document.getElementsByTagName("div"), i, div ;for( i=0; i<divs.length; i++ ){ div = document.createElement("div"); document.body.appendChild("div");}以上代码会导致无限循环:第一行代码会取得所有的div元素的nodelist,由于nodelist是动态的,因此只要有新的div添加到页面中,下一次的for循环就会再对divs.length求值,因此i和divs.length每次都会同时递增,结果他们的值永远不会相等,就创建了一个死循环。 所以,如果想要迭代一个nodelist最好使用length属性初始化第二个变量,然后将迭代器与该变量进行比较,修改后的代码如下:
var divs = document.getElementsByTagName("div"), i, div ,len ;for(i=0;len=divs.length;i<len;i++){
div = document.createElement("div");
document.body.appendChild("div");
}
这个例子中初始化了len,由于len中保存着divs.length在循环开始时的一个快照,因此会避免上一个例子中出现的无限循环问题,因此当需要对nodelist进行循环迭代的时候,使用这种方法更为保险。 总结:1.将length的值进行缓存,到底是否有利于性能优化,是一个需要根据具体情况进行判断的事情,总体来讲,减少对DOM的访问还是有好处的;2.当需要操作nodelist的时候,建议将length的值进行缓存,可以避免出现死循环。
时间: 2024-10-08 19:44:00