Run results for: TreeWalker vs querySelectorAll to delete ids

Run details:

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

Browser: Firefox 133

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: one year ago

TreeWalker (from reference)

691K/s

querySelector (from reference)

522K/s

querySelector (from template)

22K/s

TreeWalker (from template)

18K/s

View exact numbers

Test name	Executions per second
✓ TreeWalker (from reference)	691,192 Ops/sec
querySelector (from reference)	521,599 Ops/sec
querySelector (from template)	22,412 Ops/sec
TreeWalker (from template)	17,999 Ops/sec

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"); }