Run results for: Traverse function vs NodeIterator vs TreeWalker for Custom Element Search

Run details:

User agent: Mozilla/5.0 (Linux; Android 11; GM1913) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Mobile Safari/537.36

Browser: Chrome Mobile 103

Operating system: Android

Device Platform: Mobile

Date tested: 2 years ago

Test name	Executions per second
Traverse function	11016.2 Ops/sec
NodeIterator	12766.5 Ops/sec
TreeWalker	15356.3 Ops/sec

Script Preparation code:

// language=HTML
const html = `
<body>
  <h1>Doc with mix of light and shadow DOM custom elements</h1>
  <p>NOTE: we rely on Chrome's support for "declarative shadow DOM"</p>
  <x-light id="1">
    <!-- comment -->
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum deserunt
    dolor nesciunt ab placeat nostrum. Laborum rem quisquam ullam, officiis
    maiores fugiat fuga animi quos. Ex earum a alias magni.
  </x-light>
  <x-shadow id="2">
    <template shadowroot="open">
      <!-- comment -->
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam amet
        error delectus...
      </p>
      <slot></slot>
    </template>
    <!-- comment -->
    Impedit nesciunt excepturi perferendis quis in debitis vitae soluta
    voluptatibus praesentium repellat labore quas. Cum unde consectetur
    maiores.
  </x-shadow>
  <x-light id="3">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum deserunt
    dolor nesciunt ab placeat nostrum. Laborum rem quisquam ullam, officiis
    maiores fugiat fuga animi quos. Ex earum a alias magni.
    <x-light id="3.1">
      <span>Lorem ipsum dolor sit amet</span> consectetur adipisicing elit.
      Rerum deserunt dolor nesciunt ab placeat nostrum. Laborum rem quisquam
      ullam, officiis maiores fugiat fuga animi quos. Ex earum a alias magni.
      <x-light id="3.1.1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum
        deserunt dolor nesciunt ab placeat nostrum. Laborum rem quisquam
        ullam, officiis maiores fugiat fuga animi quos. Ex earum a alias
        magni.
      </x-light>
    </x-light>
  </x-light>
  <x-shadow id="4">
    <template shadowroot="open">
      <x-shadow id="4.1">
        <template shadowroot="open">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam amet
          error delectus...
          <slot></slot>
          <x-shadow id="4.1.1">
            <template shadowroot="open">
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam
              amet error delectus...
              <slot></slot>
            </template>
            Impedit nesciunt excepturi perferendis quis in debitis vitae
            soluta voluptatibus praesentium repellat labore quas. Cum unde
            consectetur maiores.
            <x-light id="4.1.1.1">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum
                deserunt dolor nesciunt ab placeat nostrum. Laborum rem
                quisquam ullam, officiis maiores fugiat fuga animi quos. Ex
                earum a alias magni.
              </p>
            </x-light>
          </x-shadow>
        </template>
        Impedit nesciunt excepturi perferendis quis in debitis vitae soluta
        voluptatibus praesentium repellat labore quas. Cum unde consectetur
        maiores.
      </x-shadow>
      <slot></slot>
    </template>
    <x-shadow id="5">
      <template shadowroot="open">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam amet
        error delectus...
        <slot></slot>
      </template>
      Impedit nesciunt excepturi perferendis quis in debitis vitae soluta
      voluptatibus praesentium repellat labore quas. Cum unde consectetur
      maiores.
    </x-shadow>
  </x-shadow>
</body>
`;
const fragment = new DOMParser().parseFromString(html, 'text/html', {
	includeShadowRoots: true
});
document.body.replaceChildren(fragment.body);
window.testTraverse = function traverse(node, use) {
    if (!node) return;

    use(node);
    traverse(node.firstChild, use);
    traverse(node.nextSibling, use);
}

Tests:

Traverse function
const customEls = []; const func = node => { if (node.nodeType === Node.ELEMENT_NODE && node.tagName.includes('-')) { customEls.push(node); } if (node.shadowRoot) { testTraverse(node.shadowRoot.firstChild, func) } } testTraverse(document.body.firstChild, func); console.log(customEls)
NodeIterator
function getAllCustomElementsUsingNodeIterator(root = document.body) { const elms = [] let currentNode const nodeIterator = document.createNodeIterator( root, NodeFilter.SHOW_ELEMENT, null ) while ((currentNode = nodeIterator.nextNode())) { if (currentNode.tagName.includes('-')) { elms.push(currentNode) if (currentNode.shadowRoot) { elms.push(...getAllCustomElementsUsingNodeIterator(currentNode.shadowRoot)) } } } return elms } console.log(getAllCustomElementsUsingNodeIterator())
TreeWalker
function getAllCustomElementsUsingTreeWalker(root = document.body) { const elms = [] let currentNode const treeWalker = document.createTreeWalker( root, NodeFilter.SHOW_ELEMENT, null ) while ((currentNode = treeWalker.nextNode())) { if (currentNode.tagName.includes('-')) { elms.push(currentNode) if (currentNode.shadowRoot) { elms.push(...getAllCustomElementsUsingTreeWalker(currentNode.shadowRoot)) } } } return elms } console.log(getAllCustomElementsUsingTreeWalker())

Run results for: Traverse function vs NodeIterator vs TreeWalker for Custom Element Search

Let's compare the speed of 3 different ways to traverse the DOM and shadow DOM, with the goal of finding all custom elements.

Traverse function

NodeIterator

TreeWalker