jQuery Cookbook - Cdn.oreilly.com - O'Reilly

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.
Solution
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; see the next recipe for
ways to do that. But simply calling them once each instead of over and over again may
be enough of an improvement right there.
Discussion
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.
106 | Chapter 5: Faster, Simpler, More Fun