CODEWITHSUNDEEP
javascriptperformance
Kenton de Jong
Kenton de Jong

Reputation: 995

Did I measure document.getElementById's speed correctly?

I wanted to find out if there was a faster way to select a DOM element by its id, rather than document.getElementById. I did some research and found that I could select an id by its global namespace. Instead of doing this:

<div id="myElement"></div>

<script>
console.log(document.getElemenetById('myElement'));
</script>

I could do this:

<div id="myElement"></div>

<script>
console.log(myElement);
</script>

But I read that referencing a global namespace is 1) slow, 2) makes bad code and 3) is difficult for other developers to understand. I then tested the performance like so:

<div id="myElement"></div>
<div id="myElement2"></div>

<script>
var a = performance.now();
console.log(myElement);
var b = performance.now();

var c = performance.now();
console.log(document.getElementById('myElement2'));
var d = performance.now();

console.log("Global call took " + (b - a) + " milliseconds.");
console.log("By Id call took " + (d - c) + " milliseconds.");
</script>

And yes, the global namespace was slower. But if I did put the global namespace variable in a "local" constant variable, like this:

const myElement= myElement;

And I cached the document.getElemenetById() one like so:

const myElement2 = document.getElemenetById('myElement2');

I then ran my performance script again and noted that myElement was slower. I then switched the order of them in my code, and noticed myElement2 was slower.

I literally just changed this:

var a = performance.now();
console.log(myElement);
var b = performance.now();

var c = performance.now();
console.log(myElement2);
var d = performance.now();

console.log("Global call took " + (b - a) + " milliseconds.");
console.log("By Id call took " + (d - c) + " milliseconds.");

to this:

var c = performance.now();
console.log(myElement2);
var d = performance.now();

var a = performance.now();
console.log(myElement);
var b = performance.now();

console.log("Global call took " + (b - a) + " milliseconds.");
console.log("By Id call took " + (d - c) + " milliseconds.");

I then ran them independently in a loop so that they'd run 1000x, and then I compared the speed. According to my findings, the global namespace selector, when was cached as a constant local variable, is slightly faster.

So before I tell the world I found a faster solution that document.getElementById, my question is: did I measure this correctly?

Upvotes: 0

Views: 66

Answers (1)

Showrin Barua
Showrin Barua

Reputation: 1795

I think there's a misconception. Actually, when you are storing the dive into the constant, it's taking the same time as the normal approach. Then what are you missing?

You are measuring the performance of console.log() function. In the following:

var c = performance.now();
console.log(myElement2);
var d = performance.now();

But you are not counting the time to find the div and assign it to myElement2 this constant. I mean this line is not in your measurement.

const myElement2 = document.getElemenetById('myElement2');

Don't think that when you are logging myElement2, then it starts to find the div. It's been when you are writing this --- const myElement2 = document.getElemenetById('myElement2');

So your performance measurement procedure should be like the following.

var c = performance.now();
const myElement2 = document.getElemenetById('myElement2');
console.log(myElement2);
var d = performance.now();

var a = performance.now();
const myElement = document.getElemenetById('myElement')
console.log(myElement);
var b = performance.now();

console.log("Global call took " + (b - a) + " milliseconds.");
console.log("By Id call took " + (d - c) + " milliseconds.");

And I think the time should be the same as the normal approach. Actually, there is nothing new except the variable.

Upvotes: 1

Related Questions