JavaScriptFor循环中的array.length该不该缓存

JS中绝大多数的for循环都会和指定数组长度(array.length)打交道,将数组长度(array.length)缓存至变量里可以在每次for循环判断时直接获取数组的长度,而不是每次判断时都重新计算一遍,从而达到节省资源的目的。

// 不缓存 
for (var i = 0; i < arr.length; i++) {  
//代码
}

// 缓存
var len = arr.length;
for (var i = 0; i < len; i++) {  
//代码
}

可这个小小的优化措施对于性能的提升到底如何?

直接上图:

来源:[Shoud I have to cache my array’s length?](http://blogs.msdn.com/b/eternalcoding/archive/2015/01/07/javascript-shoud-i-have-to-cache-my-array-s-length.aspx)
来源:[JavaScript's .length Property is a Stored Value](http://www.erichynds.com/blog/javascript-length-property-is-a-stored-value)

从图中可以看出缓存length属性的话,对性能的确是有小幅度提升的,可是在使用了v8引擎的浏览器中(google chrome),由于v8引擎的Loop-invariant code motion特性,循环体中那些不会发生变化的语句将会被直接移到循环体外:

for (var i = 0; i < n; i++) { 
x = y + z; a[i] = 6 * i + x * x;
}

将会在编译时自动优化成:

x = y + z;
t1 = x * x;
for (var i = 0; i < n; i++) { 
a[i] = 6 * i + t1;
}

以优化性能。
由于这个特性,即便没有缓存length属性,由于length属性不会随着循环次数的增多而变化,length属性会被自动移到循环体外并缓存起来(仅限使用了v8引擎的chrome浏览器),所以是否多写一行代码来缓存length属性,并不会影响到chrome浏览器对于array.length的优化,至于非v8的主流浏览器(特别是ie),缓存length属性对于性能还是有比较客观的提升的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容