Benchmark: Traverse function vs NodeIterator vs TreeWalker1

Script Preparation code:

// language=HTML
const html = `
    <!-- article out start -->
    <article>
        <!-- article in start -->
        <h1>Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
        <!-- article in end -->
    </article>
    <!-- article out end -->

    <!-- article out start -->
    <article>
        <!-- article in start -->
        <h1>Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
        <!-- article in end -->
    </article>
    <!-- article out end -->

    <!-- article out start -->
    <article>
        <!-- article in start -->
        <h1>Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
        <!-- article in end -->
    </article>
    <!-- article out end -->
`;
const template = document.createElement('template');
template.innerHTML = html;

window.testTemplate = template;

Tests:

createTreeWalker
var html = document.querySelector('html'); var walker = document.createTreeWalker(html, NodeFilter.SHOW_ALL); var node; while (node = walker.nextNode()) { console.log(node); }
XPATH
var vv = 'count'; var data = {count:1}; var xpat = document.evaluate(`//*[contains(translate(text(),' ', ''), "{{${vv}}}") or contains(translate(@value,' ', ''), "{{${vv}}}")]`, document, null, XPathResult.ANY_TYPE, null); while(node = xpat.iterateNext()){ console.log(node); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createTreeWalker
XPATH

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:134.0) Gecko/20100101 Firefox/134.0

Browser/OS: Firefox 134 on Linux

View result in a separate tab

Test name	Executions per second
createTreeWalker	1383.2 Ops/sec
XPATH	6976.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript benchmarks and explore what's being tested on MeasureThat.net.

The provided benchmark compares three ways to traverse the DOM (Document Object Model):

1. **`document.createTreeWalker()`**: This method creates an iterator that traverses the DOM tree, allowing you to iterate over nodes in a specific order.
2. **XPATH (XPath Expression)**: This is a query language for selecting nodes in an XML document (or in this case, a DOM). The XPath expression `//*[contains(translate(text(),' ', ''), \"{{${vv}}}\")]` selects elements that contain the value of `vv`.
3. **`var html = document.querySelector('html');`**: This method uses CSS selectors to select an element by its tag name or ID.

**Options Comparison**

Let's examine each option:

*   **`document.createTreeWalker()`**: This approach provides direct access to the DOM tree structure, allowing for efficient traversal. However, it may not be suitable for complex document structures or large datasets.
*   **XPATH**: XPATH is a powerful query language that can handle complex selection patterns and recursive traversals. However, its performance might suffer due to parsing and evaluation overhead.
*   **`var html = document.querySelector('html');`**: This approach uses CSS selectors, which are widely supported but may not be efficient for large or deeply nested documents.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

*   `document.createTreeWalker()`
    *   Pros:
        *   Efficient traversal of DOM trees
        *   Allows direct access to node data
    *   Cons:
        *   May not handle complex structures or large datasets efficiently
*   XPATH
    *   Pros:
        *   Handles complex selection patterns and recursive traversals
        *   Wide support for various document formats
    *   Cons:
        *   Performance overhead due to parsing and evaluation
*   `var html = document.querySelector('html');`
    *   Pros:
        *   Simple and widely supported
        *   Suitable for small or shallow documents
    *   Cons:
        *   Limited applicability due to CSS selector constraints

**Library: XPath**

The XPATH expression is evaluated using the `document.evaluate()` method, which takes several parameters:

*   The XPath expression itself (in this case, a complex selection pattern)
*   The document context (`document`)
*   An optional namespace resolver function
*   The result type (e.g., `ANY_TYPE` for any type of node)

**Special JS Feature: Spread Operator**

The spread operator (`{{${vv}}}`) is used in the XPATH expression to dynamically reference a variable `vv`. This syntax allows values to be interpolated into the XPath expression at runtime.

**Benchmark Results**

According to the latest benchmark results, XPATH outperforms `document.createTreeWalker()` on this specific test case. However, keep in mind that these results may vary depending on the underlying document structure and JavaScript engine optimizations.

**Alternative Approaches**

If you're looking for alternative methods to traverse the DOM, consider the following:

*   **`const html = new DOMParser().parseFromString(htmlString, 'text/html');`**: This approach uses a `DOMParser` to parse an HTML string into a document object.
*   **`const doc = new DOMDocument(); doc.appendChild(doc.createElement('html'));`**: This method creates a new DOM document and appends the root element to it.

These alternatives might be useful in specific situations, but they may not provide the same level of performance or ease of use as the original approaches.

Related benchmarks:

Traverse function vs NodeIterator vs TreeWalker1 (version: 0)

Let's compare the speed of 3 different ways to traverse the DOM.

Comparing performance of: createTreeWalker vs XPATH

Created: 4 years ago by: Guest

Jump to the latest result

createTreeWalker

XPATH

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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