jQuery: The Performance of DOM caching

I decided to test the performance of DOM caching in a basic JavaScript namespacing pattern which I use quite a lot when coding on a day to day basis. Update 10/04/2013: I’ve added some basic logic into the loops. Updated jsfiddle, Updated jsperf.

You could get a 76% increase in speed performance (based on operations per second) when you use DOM caching.

Here is the full results of a jsperf performance test – grouped in pairs. So compare 1 with 2, compare 3 with 4 and so on…

The results show that caching your DOM elements dramatically improves the speed of your code execution. This is clearly seen when comparing tests 3 and 4 where you get a boost from 32,889 to 602,620 operations per second!

Calculation of percentage increase.

Comparing 2a and 2b shows a 76% increase in speed (based on operations per second). ((98,072-23,358)/98,072)*100 = 76.18% increase.

Some basic markup.

   

       
list
       

         

             
nested 1
             
nested 2
             
nested 3
         
       
       
list
       
list
       
list
   
   

A basic js object with some caching.

MY_OBJECT = 
    {
        cache: {},
    
        init: function()
        {
            this.cache.c = $('#container');
            this.cache.n = this.cache.c.find('.nested');
            this.cache.s = this.cache.c.find('#status');
        }
    }
    
    MY_OBJECT.init();

Some standard tests.

//no cache container find
$.each($('#container').find('li'), function(i,v)
{
    //...
});


//cache container find
$.each(MY_OBJECT.cache.c.find('li'), function(i,v)
{
    //...
});


//no cache class elements loop
$.each($('.nested'), function(i,v)
{
    //...
});


//cache class elements loop
$.each(MY_OBJECT.cache.n, function(i,v)
{
    //...
});


//no cache update status
$('.nested').each(function(i,v)
{
    $('#status').text($(this).text());
});


//cache update status
$.each(MY_OBJECT.cache.n, function(i,v)
{
    MY_OBJECT.cache.s.text($(this).text());
});