JavaScript 数组、Object对象for循环效率对比
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 本文章给大家介绍一彷关于JavaScript 数组、Object对象for循环效率对比，有需要了解的朋友可参考...
|
原来小航子（山山）跟我说过，多用object对象少用数组对象，因为object的效率要高一些，今天刚好在写一个JS的遇到了一个用数组还是用对象的问题，所以就简单写了测试页面。
| 代码如下 |
复制代码 |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Test Page</title>
</head>
<body>
<p style="color:#fff; background:red;">Object for-in-Loop Spend Time: <span id="oaTime" style="background:#000;"></span></p>
<p style="color:#fff; background:red;">Array for-Loop Spend Time: <span id="aaTime" style="background:#000;"></span></p>
<h2>Object Area</h2>
<div id="object-area"></div>
<h2>Array Area</h2>
<div id="array-area"></div>
<script type="text/javascript">
//<![CDATA
function randomString() {
var i = Math.ceil(Math.random() * 200),
a = new Array(i);
while(i--)
a[i] = String.fromCharCode(Math.ceil(Math.random() * 40) + 30);
return a.join('');
};
var num = 1000;
var testObject = {}, testArray = [];
for (var i = 0; i < num; i++) {
var str = randomString();
testObject[i] = str;
testArray[i] = str;
}
var oa = document.getElementById('object-area'), aa = document.getElementById('array-area'), oat = document.getElementById('oaTime'), aat = document.getElementById('aaTime');
var startTime = new Date();
for (var name in testObject)
oa.innerHTML += testObject[name];
var endTime = new Date();
oat.innerHTML = endTime - startTime + 'ms';
var startTime = new Date();
for (var i = 0, length = testArray.length; i < length; i++)
aa.innerHTML += testArray[i];
var endTime = new Date();
aat.innerHTML = endTime - startTime + 'ms';
//]]>
</script>
</body>
</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引擎仍需提高啊~ |
