jQuery optimizing performance with cached element and selector

Question

With jQuery, it is bad practice to call a selector multiple times like this:

$('#myDiv').addClass('class1');
$('#myDiv').removeClass('class2');
$('#myDiv').append(`<div>Hello World`);

So it often advised to cache the selector as such:

let element = $('#myDiv');

element.addClass('class1');
element.removeClass('class2');
element.append(`<div>Hello World`);

But let’s say for example this is done:

let element = document.getElementByID('myDiv');

$(element).addClass('class1');
$(element).removeClass('class2');
$(element).append(`<div>Hello World`);

OR

let element = $('#myDiv');
$(element).addClass('class1');
$(element).removeClass('class2');
$(element).append(`<div>Hello World`);

Does either or both of those have the same negative impact when calling the selector that way?

You can run your examples through JSBench to see the performance differences. Though I expect the benefits are negligible. — StackByMe
– StackByMe, Commented Jan 11, 2023 at 12:29
The following post might also be worth reading Is premature optimization really the root of all evil? — StackByMe
– StackByMe, Commented Jan 11, 2023 at 12:32

Flewz · Accepted Answer · 2023-01-11 12:39:18Z

Using jsbench to test.

<script
  src="https://code.jquery.com/jquery-3.6.3.min.js"
  integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
  crossorigin="anonymous"></script>
<div id="myDiv"></div>

29019 ops/s

$('#myDiv').addClass('class1');
$('#myDiv').removeClass('class2');
$('#myDiv').append(`<div>Hello World`);

30490 ops/s

let element = $('#myDiv');

element.addClass('class1');
element.removeClass('class2');
element.append(`<div>Hello World`);

28132 ops/s

let element = document.getElementById('myDiv');

$(element).addClass('class1');
$(element).removeClass('class2');
$(element).append(`<div>Hello World`);

31404 ops/s

let element = $('#myDiv');
$(element).addClass('class1');
$(element).removeClass('class2');
$(element).append(`<div>Hello World`);

Last one was the fastest. I am guessing because we already have a jquery reference which was then passed further. I am surprised it beat the second test case, maybe just my browser doing something. I would put the 2nd and last to be equivalent in speed.

Peter Mortensen · Accepted Answer · 2023-06-08 13:36:33Z

0

No, they don’t have the same negative impact. You have already reference to the DOM element and there is no need to traverse DOM tree again to look for it. Both cases add some overhead and are unnecessary.

In general, use chaining where possible and keep the jQuery object reference if you need it frequently.

UPDATE

I wasn’t right about jQuery object creation. jQuery always does some "heavy" work.

Results for one million loops on my PC:

document.getElementById("test");    // Ca. 37 ms
$("#test");                         // Ca. 358 ms
$(document.getElementById("test")); // Ca. 220 ms
$(cachedDiv);                       // Ca. 182 ms

edited Jun 8, 2023 at 13:36

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jan 11, 2023 at 12:32

Jan Pfeifer

2,85130 silver badges37 bronze badges

Collectives™ on Stack Overflow

jQuery optimizing performance with cached element and selector

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related