jQuery: The Performance of DOM caching

Sam Deering

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…

dom-caching-test3

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!

loop-only-results

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.

<div id="container">
   <ul>
       <li>list</li>
       <li>
         <ul>
             <li class="nested">nested 1</li>
             <li class="nested">nested 2</li>
             <li class="nested">nested 3</li>
         </ul>
       </li>
       <li>list</li>
       <li>list</li>
       <li>list</li>
   </ul>
   <div id="status"></div>
</div>

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());
});

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Pingback: jQuery: The Performance of DOM caching | Gallery.Clipapic

  • Michał Gołębiowski

    I’m sorry but these tests are seriously off. You mostly create loops doing nothing so some browsers may prune some of them completely with their optimizations. Besides, if you iterate on just a few elements doing nothing, what’s surprising in the fact that having the iterated collection pre-calculated significantly improves the loop’s execution time? Your last example shows clearly that in real world these differences are way below the 95% you claim could be achieved.

    • http://jquery4u.com/ jQuery4u

      Hi Michal, thanks for your comment, I have added some basic logic to the loops in order to prove your theory. It’s reduced the percentage increase in speed as predicted but still shows good results at around 76% increase. Cache FTW!
      Sam