IE native JavaScript methods performance

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.<code>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  

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, <a href="http://api.jquery.com/append/">jQuery.append()</a> 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<code> (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.