getElementById and querySelector VS named element (v86)

Revision 86 of this benchmark created 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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="testid" class="testclass"></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
JQuery by ID
node = $('#testid')
ready
JQuery by Name
node = $('div')
ready
JQuery by class
node = $('.testclass')
ready

Revisions

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