Benchmark: TreeWalker vs querySelectorAll to delete ids

HTML Preparation code:

<template id="template">
    <!-- article out start -->
    <article id="442">
        <!-- article in start -->
        <h1>Lorem ipsum</h1>
        <p id="452">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 id="ggg">Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
        <!-- article in end -->
    </article>
    <!-- article out end -->
</template>

<div id="reference">
    <!-- article out start -->
    <article id="442">
        <!-- article in start -->
        <h1>Lorem ipsum</h1>
        <p id="452">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 id="ggg">Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
        <!-- article in end -->
    </article>
    <!-- article out end -->
</div>

<div id="container">
</div>

Script Preparation code:

window.cloneReference = () => {
  const fragment = document.createDocumentFragment();

  for(const el of reference.children) { fragment.append(el) }

  return fragment.cloneNode(true);
}

window.cloneTemplate = () => {
  return template.content.cloneNode(true);
}

window.container = document.querySelector("#container");

// need to create beforehand, as we are measuring performance of the method on a single node
window.treeWalker = document.createTreeWalker(
  container,
  NodeFilter.SHOW_ELEMENT,
  (node) => (node.id ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT),
);

Tests:

TreeWalker (from reference)
container.innerHTML = ""; container.appendChild(cloneReference()); let element while (element = treeWalker.nextNode()) { element.removeAttribute("id"); } treeWalker.currentNode = container; // reset position
querySelector (from reference)
container.innerHTML = ""; container.appendChild(cloneReference()); let list = container.querySelectorAll('[id]'); let el; for (element of list) { element.removeAttribute("id"); }
TreeWalker (from template)
container.innerHTML = ""; container.appendChild(cloneTemplate()); let element while (element = treeWalker.nextNode()) { element.removeAttribute("id"); } treeWalker.currentNode = container; // reset position
querySelector (from template)
container.innerHTML = ""; container.appendChild(cloneTemplate()); let list = container.querySelectorAll('[id]'); let el; for (element of list) { element.removeAttribute("id"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
TreeWalker (from reference)
querySelector (from reference)
TreeWalker (from template)
querySelector (from template)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 days ago)

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
TreeWalker (from reference)	928316.4 Ops/sec
querySelector (from reference)	700580.4 Ops/sec
TreeWalker (from template)	37950.7 Ops/sec
querySelector (from template)	38192.1 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 8 days ago):

LLMs can make mistakes. Check important info.

### Benchmark Overview

This benchmark compares the performance of two different DOM manipulation methods in JavaScript: **TreeWalker** and **querySelectorAll**. It specifically evaluates their efficiency in removing HTML element attributes (`id` in this case) from a set of elements within a document fragment or template.

#### Test Cases and Approaches

1. **TreeWalker (from reference)**:
   - **Definition**: Uses a TreeWalker to traverse the DOM nodes and removes the `id` attributes.
   - **Pros**: More efficient for large DOM trees with many nodes since it operates directly on the node tree without needing to collect all matching nodes beforehand.
   - **Cons**: Slightly more complex to implement than `querySelectorAll`.

2. **querySelector (from reference)**:
   - **Definition**: Uses the `querySelectorAll` method to gather all elements with `id` attributes and then removes them.
   - **Pros**: Simpler and more intuitive syntax; great for quick element selection.
   - **Cons**: Creates a static NodeList, which can lead to increased memory use and overhead for large DOM structures.

3. **TreeWalker (from template)**:
   - **Definition**: Similar to the first test but uses a cloned template that is added to the container before traversal.
   - **Pros**: Performs the same efficient attribute removal as the first test case.
   - **Cons**: Still requires traversal logic, which may be slightly more complex.

4. **querySelector (from template)**:
   - **Definition**: Uses `querySelectorAll` again, this time on the cloned template.
   - **Pros**: Again, the straightforward syntax makes it easier to understand and utilize for developers unfamiliar with advanced DOM traversal techniques.
   - **Cons**: Performance can drop significantly compared to TreeWalker, especially with larger sets of elements.

### Performance Results Analysis

The benchmark results provide the following execution rates (operations per second) for each test:

- **TreeWalker (from reference)**: 928,316.38 ops/sec
- **querySelector (from reference)**: 700,580.38 ops/sec
- **querySelector (from template)**: 38,192.06 ops/sec
- **TreeWalker (from template)**: 37,950.73 ops/sec

#### Observations

- **TreeWalker is significantly faster when working from a cloned reference compared to query selectors.** This disparity shows the advantages of TreeWalker in terms of efficiency, especially in large node trees.
- **Using `querySelectorAll` on templates shows a drastic drop in performance.** This illustrates the overhead associated with not only getting selections but also having to deal with the additional DOM complexity that comes from templates.

### Other Considerations

- **Browser and Device Variables**: These benchmarks were run on Chrome 131 on Mac OS X. Performance may vary under different browser engines or configurations, making it crucial to run benchmarks cross-browser for predictable results.
  
- **Memory Management**: Although not explicitly measured here, the memory overhead can differ between TreeWalker and `querySelectorAll`. If an application frequently manipulates large DOM structures, TreeWalker may be more efficient over time.

### Alternatives

In addition to using TreeWalker and `querySelectorAll`, other DOM manipulation techniques include:

- **Direct traversal**: Using traditional loops to access child nodes directly using properties like `parentNode`, `childNodes`, or `nextSibling`, though this is usually more verbose and less efficient in complex tree structures.
  
- **Intersection Observer**: For more modern scenarios, particularly in lazy loading or observing elements in the viewport, Intersection Observers can be used in conjunction with DOM manipulations.

- **Libraries**: Libraries such as jQuery abstracts these operations for easier DOM manipulation, but the performance trade-offs need to be evaluated, as they can introduce overhead compared to native methods.

Ultimately, choosing the right DOM manipulation technique will depend on the specific use case, size of the dataset, and performance considerations of the application.

Related benchmarks:

TreeWalker vs querySelectorAll to delete ids (version: 2)

Comparing performance of: TreeWalker (from reference) vs querySelector (from reference) vs TreeWalker (from template) vs querySelector (from template)

Created: 8 days ago by: Registered User

Jump to the latest result

TreeWalker (from reference)

querySelector (from reference)

TreeWalker (from template)

querySelector (from template)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 8 days ago):