getElementById and querySelector VS named element (v14)

Revision 14 of this benchmark created by Nonlinearcode on

Description

This test shows the performance difference between getting the reference to a DOM element by calling getElementById, querySelector and accessing it via the named element of window.

The test only uses one HTML element with the id as the standard expects to only have one unique element with that ID in the DOM. Other than that the created object "node" will contain a collection if we use querySelector or the named element.

Preparation HTML

<div id="testid"></div>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
node = document.getElementById('testid');
 
ready
querySelector
node = document.querySelector('#testid');
 
ready
named elements
node = window.testid;
 
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.