-2

I know in jQuery it is best practice to assign selectors to variables in order to prevent from traversing the DOM repeatedly.

Is this also the case in vanilla JS, or do the extra lines declaring the constants just take up space unnecessarily?

jQuery Version:

var elem = $('#elem');

Vanilla JS Equivalent

const elem = document.getElementById('elem');
Toki
  • 517
  • 3
  • 9
  • 27
  • 2
    Wouldn't it be much easier to try and test on your own? Something like `console.time(); ...console.timeEnd();` – B001ᛦ Jul 20 '20 at 21:32
  • 1
    I've tried both methods - declaring all as constants and simply using getElementById and so on, I'm using constants for certain calculations as well, however the script I'm writing is currently not more than 20 or 30 lines, so there really isn't any tangible difference I can pull up in dev tools or console logging.. – Toki Jul 20 '20 at 21:37
  • _..there really isn't any tangible difference in I can pull up in dev tools or console logging..._ Why do you think so? Just call your functions within a loop like 10000x, you will see the difference much better. Performance has nothing todo with the number of code lines... – B001ᛦ Jul 20 '20 at 21:39
  • A long time ago I was studying jQuery code and how the selectors work. DOM traversing is implemented by using [Sizzle][1]. When selecting an element by id, Sizzle invokes the native `getElementById` function. Thus, there should not be any performance difference between the two. However, from the best practices perspective, I would stick with jQuery just to be consistent. [1]: https://github.com/jquery/sizzle – Eriks Klotins Jul 20 '20 at 21:42
  • 1
    @CultDigital Indeed. For normal code, there won't be a noticeable performance difference. However, you should also consider clean and [dry](https://en.wikipedia.org/wiki/Don't_repeat_yourself) code, so using a variable is definitely a best practice. – Bergi Jul 20 '20 at 21:42
  • 1
    For me, talking about performance here is a red herring - unless you have a script that does this kind of thing tens of thousands of times, or you're writing a general UI framework/library. The key thing for me is that your code is much more readable and maintainable if you extract these elements into constants. Imagine, for example, if you wanted to change an ID. You'd much rather just change that in one place, rather than in dozens or hundreds. [EDIT: same point as @Bergi, just in more words :)] – Robin Zigmond Jul 20 '20 at 21:42
  • Thanks all for the input here, good points made - much appreciated. – Toki Jul 20 '20 at 21:46
  • Think about it this way. Get a book and go to page 135. Close the book. Go back to page 135. Close the book, go back to page 135. Or you can leave the book open to 135 with a bookmark. What is faster? – epascarello Jul 20 '20 at 21:47

1 Answers1

0

short answer: yes

getElementById is a function, every time you call it, it will traverse the DOM tree to find that element. You are essentially caching those results by storing it in a variable.

delashum
  • 801
  • 7
  • 16