Home > Developer > Ajax

Comparison of JavaScript Array and Object for loop Efficiency

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

This article introduces how to compare the efficiency of JavaScript arrays and Object objects for loops. for more information, see

In the past, xiaohang sub (mountain) told me that the multi-purpose object uses fewer array objects, because the object is more efficient, today, when I was writing a JS file, I encountered a problem of using arrays or objects, So I simply wrote a 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>
<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 <Div id = "object-area"> </div>
<H2> Array Area <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-Region'), aa = document. getElementById ('array-area'), oat = document. getElementById ('oatime '), aat = document. getElementById ('atime ');
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>

Experiment content: the test content is mainly for loop, because arrays generally use for loop to traverse array elements, and object objects should use .. in loop to traverse object elements, so the main test idea is to fill the object and array with a large number of elements, and then test their traversal and output consumption time respectively.

Tutorial method: Briefly describe the implementation method. First, use a function to randomly generate a string (the length of each generated string is between 0 and characters ), then, the generated strings are stored in the object and the array object respectively (1000 of the above strings are usually generated), and then output on the page using the innerHTML method to calculate the traversal and output time.

Note: The innerHTML method is used for output because the efficiency is much higher than that of the DOM method. In addition, this efficiency is helpful for efficient detection. The innerHTML + = method is used for iterative output, although the efficiency is very low, you should consider storing an array and then in. join ('') generates string output, but considering the time consumption of converting an object to an array, you can simply select the innerHTML + = method output.

Warning due to the huge amount of computing on this test page, the browser may occupy a high CPU, and the browser may also be suspended, therefore, during the test, make sure that the browser does not open the unsaved page or perform other operations that may cause losses!

Conclusion: 1. after several simple tests, it is found that the efficiency of the array for loop is usually higher than that of the object for-in loop, and sometimes the efficiency is even higher than 50%, the opposite result page may appear several times, but in general, the efficiency of the array loop is higher than the for-in loop of the object;
2. at the same time, through tests in different browsers, we found that for the JavaScript Engines of various browsers, Chrome 2's V8 engine is the best, the average time consumption is very low, and the phenomenon of false death is slight; followed by Opera, 9.6 compared with Chrome, it is a little slower, but the stability is not as good as Chrome, the process will be "not responding"; the third should be Safari 4 Beta, the operation speed is a little slower than Opera, but it is relatively stable. Fourth, it should belong to IE8. The computation speed is slower than that of the above browsers, but there is no false positives. Finally, Firefox 3.0.10 is the slowest speed, which is usually much slower than IE8, sometimes it is 200% slower than IE8 !! It seems that the JavaScript engine of Firefox 3.0 still needs to be improved ~

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.

Related Keywords:
javascript loop through object javascript loop object properties break out of for loop javascript object of comparison javascript loop through object properties php array of object for loop array
Related Article
JQuery AJAX Timeout Timeout problem detailed _jquery
The difference between traditional web development patterns a...
JQuery ajax File Download _ajax
Ajax various implementation methods compare _ajax
Ajax Getting Started Guide (ii)
SPRINGMVC passing a parameter list object through Ajax or pas...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

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