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: one year 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

TreeWalker (from reference)

928K/s

querySelector (from reference)

701K/s

querySelector (from template)

38K/s

TreeWalker (from template)

38K/s

View exact numbers

Test name	Executions per second
✓ TreeWalker (from reference)	928,316 Ops/sec
querySelector (from reference)	700,580 Ops/sec
querySelector (from template)	38,192 Ops/sec
TreeWalker (from template)	37,951 Ops/sec

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: one year ago by: Registered User

Go to the latest result

TreeWalker (from reference)

querySelector (from reference)

TreeWalker (from template)

querySelector (from template)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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: one year ago by: Registered User

Go to the latest result

TreeWalker (from reference)

querySelector (from reference)

TreeWalker (from template)

querySelector (from template)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

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