JavaScript array, Object object for loop efficiency comparison

Last Update:2017-01-13 Source: Internet

Author: User

Tags join object object javascript array

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The original small air (hill) said to me, use object objects less than the array object, because the efficiency of the object is higher, and today just write a JS encountered an array or object with the problem, so simply write the test page.

The code is as follows

Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>test page</title>
<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>
<div id= "Object-area" ></div>
<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>

Experiment content: The test content is mainly for loops, because the general array is in the For loop to traverse the array elements, and the object object should be used for ... In loop to traverse an object element, so the main test idea is to populate the object and array with a large number of elements, and then test their traversal and output consumption time separately.

Experimental method: A simple introduction to the implementation method, first through a randomly generated string function (each generation string length in 0-200 characters Fu), and then save the generated string to the object object and array objects (usually to generate 1000 of these strings), Then the innerHTML method is used to output the page and compute the traversal and output time.

Note: Consider using the InnerHTML method output is because the efficiency is much higher than the DOM method, and this increase in efficiency is conducive to efficient detection, followed by the iteration of the output of the InnerHTML + + method, although this is very inefficient, you should consider saving to an array and then in the. Join (") Generates string output, but given the amount of time it takes to dump an object into an array, simply select the InnerHTML + + method output.

Warning: Because this test page calculation is very large, it is easy to cause the browser to occupy a higher CPU, while the browser suspended animation may also appear, so in the test, please make sure that the browser does not open unsaved pages or do not carry out other possible loss of operation!

Conclusion: 1. After several simple tests, it is found that the efficiency of the array for loop is usually higher than the object for-in loop, and sometimes more than 50%, but the test also found that the opposite result page may appear several times, But overall, the efficiency of the array cycle is higher than the for-in loop of object objects;
2. At the same time through different browser tests, found that for the browser JavaScript engine, the Chrome 2 V8 engine is the best, average time consuming is very low, and the phenomenon of suspended animation is slight Second is opera,9.6 its speed and chrome, slightly slower, but the stability is not as good as chrome, the process will appear "not responding" situation; the third should be Safari 4 Beta, the operation speed is slightly slower than opera, but more stable; the forth should belong to IE8, The speed of operation is slower than the above browsers, but there is no phenomenon of suspended animation, the last is the Firefox 3.0.10, the slowest, usually slower than IE8, sometimes more than IE8 slow up 200%!! It seems that Firefox 3.0 JavaScript engine still needs to improve AH ~

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More