Run results for: attribute finding: querySelectorAll vs evaluate

Test name	Executions per second
✓ querySelectorAll	354,567 Ops/sec
evaluate (ask for big array, copy elements)	37,898 Ops/sec
evaluate2 (add elements one by one to empty array)	37,516 Ops/sec
evaluate (ordered)	37,244 Ops/sec

HTML Preparation code:

<div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="test"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><div class="bob"></div><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="bob"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a><a class="test"></a>

Tests:

querySelectorAll
var output = document.querySelectorAll('a[class^="te"],div[class^="te"]'); window.top.test.querySelectorAll = output;
evaluate (ask for big array, copy elements)
var tmp = document.evaluate( '//a/@class[starts-with(string(), "te")]|//div/@class[starts-with(string(), "te")]', document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null ); var output = new Array(tmp.snapshotLength); for (let index = 0; index < output.length; ++index) output[index] = tmp.snapshotItem(index); window.top.test.evaluate = output;
evaluate2 (add elements one by one to empty array)
var tmp = document.evaluate( '//a/@class[starts-with(string(), "te")]|//div/@class[starts-with(string(), "te")]', document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null ); var output = new Array(); for (let node; node = tmp.iterateNext(); ) output.push(node); window.top.test.evaluate2 = output;
evaluate (ordered)
var tmp = document.evaluate( '//a/@class[starts-with(string(), "te")]|//div/@class[starts-with(string(), "te")]', document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null ); var output = new Array(); for (let node; node = tmp.iterateNext(); ) output.push(node); window.top.test.evaluateOrdered = output;

Run results for: attribute finding: querySelectorAll vs evaluate

querySelectorAll

evaluate (ask for big array, copy elements)

evaluate2 (add elements one by one to empty array)

evaluate (ordered)