JavaScript 数组、Object对象for循环效率对比

原来小航子(山山)跟我说过,多用object对象少用数组对象,因为object的效率要高一些,今天刚好在写一个JS的遇到了一个用数组还是用对象的问题,所以就简单写了测试页面。

详见:http://ghsky.com/lab/090521/test_js_for.html

实验内容:测试内容主要是for循环,因为一般数组都是用for循环来遍历数组元素,而object对象则应该用for..in循环来遍历对象元素,所以主要测试思路就是给object和数组填充大量元素,然后分别测试他们遍历、输出的消耗时间。

实验方法:简单说一下实施方法,首先通过一个随机生成字符串的函数(每次生成字符串长度在0-200个字符间),然后分别将生成字符串存到object对象和数组对象中(通常要生成1000个上述字符串),然后用innerHTML方法在页面中输出,计算遍历、输出时间。

说明:考虑用innerHTML方法输出是因为效率比DOM方法高很多,而且这种效率提高有助于高效检测,其次迭代输出的时候用了 innerHTML += 的方法,虽然这样效率很低,应该考虑用存到一个数组然后在.join('')生成字符串输出,但是考虑到将object转存数组也有大量时间消耗,所以索性就选择 innerHTML += 的方法输出。

警告:由于此测试页面计算量很大,容易造成浏览器占用较高CPU,同时浏览器假死现象也可能出现,因此在进行测试的时候请确保浏览器没有打开未保存页面或没有进行其他有可能造成损失的操作!

结论:1.经过几次简单的测试,发现通常情况下数组for循环效率要高于object for-in循环,且有时效率甚至高于50%以上,但是测试也发现,相反的结果页可能出现几次,但总体来看数组循环的效率是要高于object对象的for-in循环;
2.同时经过不同浏览器的测试,发现对于各浏览器的JavaScript引擎来说,Chrome 2的V8引擎最优秀,平均耗时很低,且假死现象轻微;其次是Opera,9.6它的速度和Chrome相对,稍慢一些,不过稳定性不如Chrome,过程中会出现“未响应”情况;第三应该是Safari 4 Beta,运算速度稍慢于Opera,但是较为稳定;第四应该归属IE8,运算速度慢于以上各浏览器,不过没有假死现象;最后是Firefox 3.0.10,速度最慢,通常比IE8还慢很多,有时比IE8慢达200%!!看来Firefox 3.0的JavaScript引擎仍需提高啊~

最后此种测试方法可能存在缺陷,欢迎各位DX拍砖,同时也欢迎各位博友在留言中回复两项测试的时间,谢谢~

12 Comments For This Post

  1. 一开Demo,傲游死了,火狐也挂了…… :mrgreen:

    回复该留言

    我也是,不过有个小提示的!还好没崩溃哈。

  2. 说了嘛,demo肯定会让浏览器假死一段时间的,只是多久需要看你浏览器和机器性能咯…

    回复该留言

    我的可不是假死。。。是直接黑屏。。。真挂!!!

  3. Object for-in-Loop Spend Time: 88332ms

    Array for-Loop Spend Time: 88520ms

    冒死用ipod touch上的safari测试了下,结果很夸张。。。。
    本来都打算强制关机了,没想到居然出结果了。。。。
    光这个页面就消耗了3%的电力,唉,机身迅速发热
    充电去了。。。

    PS.我也打算弄个wordpress了

    回复该留言

    :mrgreen: 强淫,居然敢用移动设备跑~~~~佩服!

  4. 天杀……IE8的结果

    Object for-in-Loop Spend Time: 8547ms
    Array for-Loop Spend Time: 8417ms

    差了10倍

    回复该留言

    这东东可不适合用来做性能测试~~ :mrgreen:

  5. 我这大部分是Array效率慢 呢。 使用的是Chrome5.0

    回复该留言

  6. 其实不应该生成HTML代码的,生成HTML代码耗时比循环耗时大多了,所以测试结果不是很准确~~

    回复该留言

  7. Object for-in-Loop Spend Time: 3915ms
    Array for-Loop Spend Time: 4080ms

    chrome for mac 6.0

    回复该留言

  8. 经过所有主浏览器4次测试,两个时间旗鼓相当,部分上下。

    回复该留言

  9. 速度排名依次为:opera: chrome: ie6: TouchNet: TT: Maxthon: MyIE: GreenBrowser: sleipnir: FF:
    其中 opera 最快:Object for-in-Loop Spend Time: 3219ms
    Array for-Loop Spend Time: 3235m
    不愧是号称速度最快的,并且数据交替显示。

    最慢:FF: Object for-in-Loop Spend Time: 22808ms
    Array for-Loop Spend Time: 23586ms

    回复该留言

  10. 发布此测试仅谢ghSky 提供的源程序。有空加我QQ 181632348

    回复该留言

  11. 楼主的测试被干扰了;
    无论在哪个浏览器中,使用innerHTML操作dom元素都是极其消耗资源的;
    要正确的测试,就应该避免在for循环中做消耗资源的动作,建议改成如下再测试:
    /* 上接LZ的代码 */
    var startTime = new Date();
    var s1='',s2='';
    for (var name in testObject){
    s1 = testObject[name];
    }

    var endTime = new Date();
    t1 = endTime - startTime + 'ms';
    var startTime02 = new Date();
    for (var i = 0, length = testArray.length; i < length; i++){
    s2 = testArray[i];
    }
    var endTime02 = new Date();
    t2 = endTime02 - startTime02 + 'ms';

    回复该留言

  12. Do you message me with a few hints on the way you made this website page look this awesome, I would be thankful.

    回复该留言

Leave a Reply

:wink: :twisted: :surprised: :smile: :sad: :rolleyes: :redface: :razz: :question: :neutral: :mrgreen: :mad: :lol: :idea: :exclaim: :evil: :eek: :cry: :cool: :confused: :biggrin: :arrow: