Click here to Skip to main content
Click here to Skip to main content

IE native JavaScript methods performance

, 2 May 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Javascript native methods are more faster than jQuery utility methods in IE9/10

Introduction 

In this small posting, I will do an comparative discussion on IE native JavaScript method with jQuery Utility method. Now a days IE is becoming more smarter. Initially, we were using jQuery utility methods to make things faster. However, IE 9/10 they became more powerful and they came up with many prototype methods which are now faster than any other library's utility methods. I will discuss and compare looping utility and + overloading methods today.

Background 

In order to understand the explained examples below, one should be aware of jQuery.each utility method. This method allow us to iterate through a collection of objects or any Array in Client Side. For additional details on each API please refer to jQuery each API.

Comparing jQuery.each vs for      

As I already said that IE utility methods are more faster. Let us pick up a case where we will be looping through an array. For looping arrays, jQuery has wonderful method called as each . I am a big fan of jQuery.each API and use this API very much since, it is very easy to use and is much faster/reliable than other looping utility. However, when I used IE native for loop using its cached local variables like index and array length. I found for loop is much more faster than jQuery.each API and I estimated, for loop is 78% faster than jQuery.each API ! and I saved much much time Smile | :)  

I will try to demonstrate this exercise here by giving one example. In order to make this comparison more simple and explanatory, let us edit 481 div in an HTML page by appending one text on it. We will do this task by using jQuery.each, jQuery.append() APIs and IE native for loop separately. Along with that we will calculate the start and end time for each operation in order for calculating the duration. Please see below code for the same.

<div>
</div>
...like this 480 divs.
<button onclick="per();">
    perf
</button>
<button onclick="fn()">
    jQueryEach
</button>
<script type="text/javascript">
    /*
    *This function is using for loop with i and l variable pre-cached.
    */
    function per() {
        alert((new Date()));
        var obj = $("div");
        for (var i = 0, l = obj.length; i < l; i++) {
            $(obj[i]).append("Hi dost" + i);
        }

        alert((new Date()));
    }
    
    /*Using jquery each api*/
    function fn() {
        alert((new Date()));
        var obj = $("div");
        obj.each(function (i, o) {
            $(this).append("Hi dost" + i);
        });
        alert((new Date()));
    }
 
</script>

When I clicked on jQueryEach button, it took me 9 seconds to accomplished the above mentioned task in IE10. However, when clicked on perf button, which is executing for loop with cached local variables took only 2 seconds to process 481 loops. Therefore, I could save 7 seconds (78% faster  )for doing same task using for loop. This experiment was really helpful to me, I improved my project's client side performance by using for loops only and got much more faster application.

Points of Interest   

Also there was one practice in JavaScript i.e., for concatenating the strings we were advised to use Array.Join() method rather using + overloading method. However, now it is not true since in IE9/10, it is already been taken care. We can use + overloading to do the same with improved performance. 

Hope this will help someone. Please post your suggestions or any corrections if you see.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Rupesh Kumar Tiwari
Software Developer (Senior)
United States United States

I am a Senior Software Developer working since 2005 in Microsoft ASP.Net and related Technologies.

I work on C#, Asp.Net, MVC, RAZOR, Entity Framework, JavaScript, jQuery, HTML5, CSS3, WCF, Silverlight, WPF, MVVM, SQL, SSIS, etc. Did Function Point Analysis, WBS to estimate projects and worked on Agile Scrum team.

I enjoy on exploring new technologies by implementing and writing about them, great interest in learning Design Patterns and their implementations. I love learning, writing JavaScript; now my favorite JavaScript library is jQuery. I enjoy writing jQuery Plugins and core JavaScript. I also write Technical blogs here. You can find me on LinkedIn.

I wrote an article on Swami Vivekananda posted his audio speeches by reading them.

Follow on   Twitter   Google+

Comments and Discussions

 
QuestionProfiling methodology Pinmemberdamian-piatkowski2-May-13 12:38 
AnswerRe: Profiling methodology PinmemberRupesh Kumar Tiwari2-May-13 16:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 2 May 2013
Article Copyright 2013 by Rupesh Kumar Tiwari
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid