querySelector vs prop access

JavaScript performance comparison

Test case created by dy

Preparation code

<a id="a"><e id="e1" class="e"></e><b><c></c><c><d><e id="e2" class="e"></e></d></c></b></a>
      
<script>
Benchmark.prototype.setup = function() {
  var a = document.querySelector('#a'), it = document.createTreeWalker(a)

};
</script>

Preparation code output

<a id="a"><e id="e1" class="e"></e><b><c></c><c><d><e id="e2" class="e"></e></d></c></b></a>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
querySelector
let els = a.querySelectorAll('e')
els[0], els[1]
pending…
childNodes path
a.firstChild, a.childNodes[1].childNodes[1].childNodes[0].childNodes[0]
pending…
query class
let els = a.querySelectorAll('.e')
els[0], els[1]
pending…
get by class
let els = a.getElementsByClassName('e')
els[0], els[1]
pending…
query path
a.querySelector('e')
a.querySelector('b>c:nth-child(2)>d>e')
pending…
tree walker
it.currentNode = a
it.firstChild() // <e>
it.nextSibling() // <b>
it.firstChild() // <c:1>
it.nextSibling() // <c:2>
it.firstChild() // <d>
it.firstChild() // <e>
pending…
getElementById
document.getElementById('e1')
document.getElementById('e2')
pending…
querySelector by id
a.querySelector('#e1')
a.querySelector('#e2')
pending…
children path
a.children[0], a.children[1].children[1].children[0].children[0]
pending…
querySelectorAll('*')
let els = a.querySelectorAll('*')
els[1]
els[6]
pending…
getElementsByTagName('*')
let els = a.getElementsByTagName('*')
els[1]
els[6]
pending…

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

0 Comments