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_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1.2 Safari/605.1.15

Browser: Safari 14

Operating system: Mac OS X 10.14.6

Device Platform: Desktop

Date tested: 3 months ago

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