Benchmark: attribute finding: querySelectorAll vs evaluate

attribute finding: querySelectorAll vs evaluate (version: 0) Benchmark.js

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

Comparing performance of: `querySelectorAll vs evaluate (ask for big array, copy elements) vs evaluate2 (add elements one by one to empty array) vs evaluate (ordered)`

Created: 7 years ago by: Guest

Go to the latest result

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;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll
evaluate (ask for big array, copy elements)
evaluate2 (add elements one by one to empty array)
evaluate (ordered)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:148.0) Gecko/20100101 Firefox/148.0

Browser/OS: Firefox 148 on Mac OS X 10.15

View result in a separate tab

querySelectorAll

355K/s

evaluate (ask for big array, copy elements)

38K/s

evaluate2 (add elements one by one to empty array)

38K/s

evaluate (ordered)

37K/s

View exact numbers

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

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

It looks like you're sharing benchmarking results and test cases for document query methods in JavaScript, specifically `querySelectorAll`, `evaluate`, and their variations.

Based on the provided data, here's a brief summary:

**Test Cases:**

1. `querySelectorAll`: This test case measures the execution speed of `document.querySelectorAll` with a CSS selector that matches multiple elements.
2. `evaluate (ask for big array, copy elements)`: This test case evaluates an XPath expression that returns a large array of elements and then copies those elements into another array using the `evaluate` method.
3. `evaluate2 (add elements one by one to empty array)`: Similar to the previous test, but instead of copying all elements at once, it adds each element individually to an empty array.
4. `evaluate (ordered)`: This test case measures the execution speed of the same XPath expression as before, but with the `ORDERED_NODE_ITERATOR_TYPE` option.

**Benchmark Results:**

The results show the number of executions per second for each test case across different browsers and platforms:

| Test Case | Chrome 111 | Executions/Sec |
| --- | --- | --- |
| `querySelectorAll` | 124,076.67 |  |
| `evaluate (ask for big array, copy elements)` | 15,409.46 |  |
| `evaluate2 (add elements one by one to empty array)` | 15,396.44 |  |
| `evaluate (ordered)` | 12,275.86 |  |

These results suggest that:

* `querySelectorAll` is the fastest test case, likely due to its optimized implementation.
* The `evaluate` tests with large arrays are slower than the `queryString` version, possibly due to the overhead of copying elements.
* The `evaluate2` test is slightly faster than the `evaluate (ordered)` test.

Keep in mind that these results might not be representative for your specific use case or environment. It's always a good idea to run more tests and analyze the results in context.

Would you like me to help with anything else?