How to cache your jQuery objects

Here is an example from the jQuery Cookbook that shows you have to cache your jQuery objects to improve performance.

---

In this example you're logging the various properties of the event object for a mousemove event, and the code lags behind because it uses $('.classname') selectors to find and update table cells with the event data.

Your page contains this HTML code for the log:

<table id="log">
    <tr><td>Client X:</td><td class="clientX"></td></tr>
    <tr><td>Client Y:</td><td class="clientY"></td></tr>
    <tr><td>Page X:</td><td class="pageX"></td></tr>
    <tr><td>Page Y:</td><td class="pageY"></td></tr>
    <tr><td>Screen X:</td><td class="screenX"></td></tr>
    <tr><td>Screen Y:</td><td class="screenY"></td></tr>
</table>

and this Javascript code:

$('html').mousemove( function( event ) {
    $('.clientX').html( event.clientX );
    $('.clientY').html( event.clientY );
    $('.pageX'). html( event.pageX );
    $('.pageY'). html( event.pageY );
    $('.screenX').html( event.screenX );
    $('.screenY').html( event.screenY );
});

The page also contains a large number (thousands!) of other DOM elements. In a simpler test page, the code performs fine, but in this complex page it is too slow.

To solve this problem, cache the jQuery objects returned by the $(...) calls, so the DOM queries only have to be run once:

var
    $clientX = $('.clientX'),
    $clientY = $('.clientY'),
    $pageX = $('.pageX'),
    $pageY = $('.pageY'),
    $screenX = $('.screenX'),
    $screenY = $('.screenY');
$('html'). mousemove( function( event ) {
    $clientX.html( event.clientX );
    $clientY.html( event.clientY );
    $pageX.html( event.pageX );
    $pageY.html( event.pageY );
    $screenX.html( event.screenX );
    $screenY.html( event.screenY );
});

You may also be able to speed up those selectors considerably (this is covered in another recipe in the book). But simply calling them once each instead of over and over again may be enough of an improvement right there.

One of the classic ways to optimize code is to "hoist" repeated calculations out of a loop so you have to do them only once. Any values that don't change inside the loop should be calculated one time, before the loop starts. If those are expensive calculations, the loop will then be much faster.

This works just as well when the "loop" is a series of frequently fired events such as mousemove and the "calculation" is a jQuery selector. Hoisting the selector out of the event handler makes the event handler respond faster.

Of course, if you're calling multiple selectors inside a loop, that will also benefit from moving them outside the loop in the same manner.