Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Speed Up the jQuery Code: Selectors’ Cache

DZone's Guide to

Speed Up the jQuery Code: Selectors’ Cache

· Web Dev Zone ·
Free Resource

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Short Experiment

Here’s a short optimization of a small chunk of jQuery code. The experiment was to increment the number of DOM element access. In this case this was a change of the innerHTML property – using the $.html() method.

I’ve measured the result with the console.time() method and thus I expect correct results for both cases. In the first case I directly call the jQuery selectors’ html() method:

for (var i = 0; i < 10000; i++) {
$('#container').html(i);
}

While in the second case I “cache” it before the loop:

var t = $('#container');
for (var i = 0; i < 10000; i++) {
t.html(i);
}

and here’s the full code in the first case:

<html>
<head>
<title>jQuery Cache</title>
</head>
<body>

<div id="container"></div>

<script src="/scripts/library.js"></script>
<script>

$(document).ready(function() {

console.time('foo');
for (var i = 0; i < 10000; i++) {
$('#container').html(i);
}
console.timeEnd('foo');
});
</script>
</body>
</html>


The Results

As expected the second “cached” approach gave better results. With the increment of the iterations the second method began to be slightly better than the first one. That’s not so much, but imagine you have more than one selector in the loop’s body?

Numbers:



Note that in the time is in ms, and, yes, this is not so much, but when you deal with large data and you’ve more than one selector in the loop’s body, this can be critical!

Graphics:


Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}