document.getElementById() versus document.querySelector() versus document.querySelectorAll() (v6)

Revision 6 of this benchmark created by Grant Kiely on

Description

A simple comparison of the performance of document.getElementById vs. document.querySelector vs. document.querySelectorAll (i realise you wouldn't use this by design for a single element lookup but it's useful to know as a generic case)

Preparation HTML

<html>
<head>
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div id="footer" class="footer">
</div>
</div>
</body>

Test runner

Ready to run.

Testing in
TestOps/sec
document.getElementById("footer")
var x=document.getElementById("footer");
ready
document.querySelector("#footer")
var x=document.querySelector("#footer");
ready
document.querySelectorAll("#footer")
var x=document.querySelectorAll("#footer")[0];
ready
document.getElementsByClassName
var x = document.getElementsByClassName('footer')[0];
ready
queryselector of class
var x = document.querySelector('.footer');
ready

Revisions

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

  • Revision 1: published by Neil Craig (@tdp_org) on
  • Revision 2: published on
  • Revision 3: published on
  • Revision 4: published on
  • Revision 5: published by Grant Kiely on
  • Revision 6: published by Grant Kiely on
  • Revision 8: published by boromil on