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 :(

Go to the benchmark

Run details:

User agent: Mozilla/5.0 (Android 10; Mobile; rv:68.0) Gecko/68.0 Firefox/68.0

Browser: Firefox Mobile 68

Operating system: Android

Device Platform: Mobile

Date tested: one year ago

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