Run results for: attribute finding: querySelectorAll vs evaluate

trying to see how to best emulate $x(), and how that compares to querySelectorAll (in a case where there is an equivalent pattern) unfortunately can't test against $x(), but I reckon it would've been way faster than the methods employed here to construct something array-like from evaluate() to mimic it :(

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Browser: Chrome 111

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
querySelectorAll	124076.7 Ops/sec
evaluate (ask for big array, copy elements)	15409.5 Ops/sec
evaluate2 (add elements one by one to empty array)	15396.4 Ops/sec
evaluate (ordered)	12275.9 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>

Script Preparation code:

window.top.test = new Object();

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)