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

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

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:


What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

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 }}