未加星标

Javascript中for-in效率分析和优化

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

javascript程序中,我们经常使用Object来模拟dictionary/map/hashmap的行为,也会使用for-in语法来遍历dictionary的元素。但你是否遇到过由于使用for-in而导致程序产生性能问题呢?

问题

Javascript里的数据结构比较简单,除了数组,就是使用对象模拟的字典/Hash表。比如:

var dict = { key1: "value1", key2: "value2" };

或者:

var dict = {}; dict.key1 = "value1"; dict.key2 = "value2";

使用起来非常方便。

如果有一个200000个元素的字典,我们一样可以用对象轻松搞定:

const dataLength = 200000; let objInt = {}; for(var ii=0;ii<dataLength;++ii){ objInt[ii] = {}; }

挨个遍历字典的元素可以这样使用for-in这样写:

for(var key in objInt){ // do something var val = obj[key]; }

但for-in这样的写法有很大的性能问题,你是否遇到呢?

实验 测试一

为分析for-in的性能问题,我们构建一个简单的测试程序:

const dataLength = 200000; let objInt = {}; for(var ii=0;ii<dataLength;++ii){ objInt[ii] = {}; } function runTestCase(obj){ console.time( 'for-in' ); for(var key in obj){ // do nothing } console.timeEnd( 'for-in' ); console.log("---------------------------") } // 采样10次 for(var ii=0; ii<10;++ii){ runTestCase(objInt); }

某次的运行结果:

for-in: 33.838134765625ms --------------------------- for-in: 22.391845703125ms --------------------------- for-in: 25.2509765625ms --------------------------- for-in: 26.045166015625ms --------------------------- for-in: 25.205078125ms --------------------------- for-in: 25.132080078125ms --------------------------- for-in: 25.23193359375ms --------------------------- for-in: 26.073974609375ms --------------------------- for-in: 26.580078125ms --------------------------- for-in: 27.85595703125ms ---------------------------

从数据上可以发现,只是遍历对象属性就花费了近30ms。如果刷新率是30fps,30ms意味着耗费了近一帧的时间。从这个角度看,for-in确实优点慢!

分析一

上面的数据是for-in整个循环的时间,从执行顺序看,第一次执行花费的时间明显多于其余9次;如果单步调试每一个for-in语句,我们会发现刚运行到for-in,第一步执行的时候会卡顿,后续的循环并不卡。

由此我们先做两个假设:

在第一次执行for-in的时候,JS引擎会做缓存,后续的for-in会重用某些数据

在每一次for-in开始执行的时候,JS引擎会针对for循环做“初始化”,准备循环所需要的key。

假如我们显式地位for循环准备key列表,可以这样来实现:

let keys = Object.keys(obj); for(var ii=0;ii<keys.length;++ii){ var val = obj[keys[ii]]; }

基于此,我们做如下的测试。

测试二 function runTestCase(obj){ console.time( 'for-in' ); for(var key in obj){ // do something //var val = obj[key]; } console.timeEnd( 'for-in' ); console.time( 'keys' ); let keys = Object.keys(obj); console.timeEnd( 'keys' ); console.time( 'for' ); for(var ii=0;ii<keys.length;++ii){ var val = obj[keys[ii]]; } console.timeEnd( 'for' ); console.log("---------------------------") }

某次执行的数据如下:

------------integer as the key--------------- for-in: 35.127197265625ms keys: 25.034912109375ms for: 8.205078125ms --------------------------- for-in: 26.971923828125ms keys: 23.35986328125ms for: 4.507080078125ms --------------------------- for-in: 26.576904296875ms keys: 22.1259765625ms for: 4.619140625ms --------------------------- for-in: 27.137939453125ms keys: 24.44189453125ms for: 4.93896484375ms --------------------------- for-in: 25.48193359375ms keys: 22.7060546875ms for: 4.5869140625ms --------------------------- for-in: 25.342041015625ms keys: 24.0732421875ms for: 4.565185546875ms --------------------------- for-in: 26.733642578125ms keys: 20.468994140625ms for: 5.10205078125ms --------------------------- for-in: 24.662109375ms keys: 21.843017578125ms for: 5.114013671875ms --------------------------- for-in: 25.3349609375ms keys: 21.201171875ms for: 4.283935546875ms --------------------------- for-in: 25.453857421875ms keys: 22.219970703125ms for: 4.64697265625ms --------------------------- 分析二

从测试结果我们可以得到以下的结论:

Time(keys) < Time(for-in) (Time(keys) + Time(for)) ≈ Time(for-in)

基于测试二,我们可以断定:for-in内部调用了类似Object.keys(...)这样方法进行了初始化。

测试三

以上两个实验,我们都是针对整数类型的key做了测试。应用中string类型的key更为常见,我们再对string的key做一下对比:

let objStr = {}; for(var ii=0;ii<dataLength;++ii){ objStr["key."+ii] = {}; } console.log("------------string as the key---------------") for(var ii=0; ii<10;++ii){ runTestCase(objStr); }

某次的运行结果:

------------string as the key--------------- for-in: 98.906005859375ms keys: 84.493896484375ms for: 18.296142578125ms --------------------------- for-in: 107.96484375ms keys: 112.447021484375ms for: 15.771728515625ms --------------------------- for-in: 98.1650390625ms keys: 87.136962890625ms for: 17.81494140625ms --------------------------- for-in: 91.898681640625ms keys: 92.19287109375ms for: 16.776123046875ms --------------------------- for-in: 102.074951171875ms keys: 82.09814453125ms for: 17.291259765625ms --------------------------- for-in: 96.35302734375ms keys: 82.85400390625ms for: 17.014892578125ms --------------------------- for-in: 94.77001953125ms keys: 83.259033203125ms for: 18.739990234375ms --------------------------- for-in: 92.93798828125ms keys: 83.68115234375ms for: 18.369873046875ms --------------------------- for-in: 95.656005859375ms keys: 79.9150390625ms for: 16.451904296875ms --------------------------- for-in: 96.9970703125ms keys: 81.939208984375ms for: 15.505859375ms --------------------------- 分析三

对比整数的key,可以发现string做为key,性能明显下降,耗时是integer类型key的3~4倍:Hash计算是有代价的。

所以,如果能用integer类型的数据做为字典的key,就不要用string类型的key。

方案 只读字典

如果应用的场景中,字典是只读的,我们只需要把keys缓存起来,每次循环直接就能得到keys的列表,省去中间商赚差价的环节:

class ReadonlyDict{ constructor(obj){ this.items = obj; this.keys = Object.keys(obj); } forEach(callback){ var keys = this.keys; var items = this.items; for(var ii=0;ii<keys.length;++ii){ var key = keys[ii]; var value = items[key]; callback(key,value); } } }

测试程序:

console.log("------------Integer Dict---------------") console.time( 'dict' ); let dictInt = new ReadonlyDict(objInt); console.timeEnd( 'dict' ); for(var ii=0; ii<10;++ii){ console.time( 'dict-forEach' ); dictInt.forEach(function(key, val){ }); console.timeEnd( 'dict-forEach' ); } console.log("------------String Dict---------------") console.time( 'dict' ); let dictStr = new ReadonlyDict(objStr); console.timeEnd( 'dict' ); for(var ii=0; ii<10;++ii){ console.time( 'dict-forEach' ); dictStr.forEach(function(key, val){ }); console.timeEnd( 'dict-forEach' ); }

执行结果:

------------Integer Dict--------------- dict: 21.92919921875ms dict-forEach: 8.44775390625ms dict-forEach: 12.47265625ms dict-forEach: 9.833984375ms dict-forEach: 8.887939453125ms dict-forEach: 8.472900390625ms dict-forEach: 8.531982421875ms dict-forEach: 7.826171875ms dict-forEach: 7.029052734375ms dict-forEach: 7.34814453125ms dict-forEach: 7.2958984375ms ------------String Dict--------------- dict: 85.69921875ms dict-forEach: 28.767822265625ms dict-forEach: 28.82080078125ms dict-forEach: 27.6630859375ms dict-forEach: 34.80517578125ms dict-forEach: 21.677001953125ms dict-forEach: 25.086181640625ms dict-forEach: 22.539794921875ms dict-forEach: 23.110107421875ms dict-forEach: 24.0830078125ms dict-forEach: 22.655029296875ms

对比测试二、三,可以看出回调函数调用也是有代价的。可以直接调用ReadonlyDict的数据成员进行遍历。

可变字典

可以在字典内容变化后,重新调用一下Object.keys(),更新keys里的内容。 或者封装set(key,value)方法。

具体实现略。

总结

在遍历属性多的对象时候,for-in效率低下:for-in内部偷偷调用了Object.keys()。

对不可变字典,可以缓存keys在后续的循环中重用。

Hash计算是有代价的:遍历对象,integer类型的key比string类型的key更高效

callback调用是有代价的:尽量避免for循环里调用

欢迎关注微信公众号:


Javascript中for-in效率分析和优化

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: keys,dict,key,forEach,ii,var,console,obj,lt,++ii,time,timeEnd
分页:12
转载请注明
本文标题:Javascript中for-in效率分析和优化
本站链接:https://www.codesec.net/view/604930.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(36)