Run results for: NodeIterator vs TreeWalker for Component Extraction (FIXED)

Run details:

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

Browser: Chrome 103

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
NodeIterator	20402.6 Ops/sec
TreeWalker	21143.8 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);

function getAllComponents(walkerFunc, root = document.body, shadowParent) {
  const components = []
  const lightParentStack = []
  let element, customElementType, customElementName, customElement
  const walker = walkerFunc(root)

  while ((element = walker.nextNode())) {
    if (
      (hasShadowRoot = !!element.shadowRoot) ||
      (customElementType = getCustomElementType(element))
    ) {
      while (
        lightParentStack.length &&
        !isAncestor(element, lightParentStack[0].element)
      ) {
        lightParentStack.shift()
      }

      lightParent = lightParentStack[0]

      if (customElementType) {
        customElementName =
          customElementType === 'built-in'
            ? element.getAttribute('is')
            : element.tagName.toLowerCase()

        customElement = {
          type: customElementType,
          name: customElementName,
          definition: customElements.get(customElementName),
        }
      } else {
        customElement = false
      }

      const component = {
        element,
        hasShadowRoot,
        customElement,
        shadowParent,
        lightParent,
        shadowChildren: [],
        lightChildren: [],
      }

      if (shadowParent) {
        shadowParent.shadowChildren.push(component)
      }

      if (lightParent) {
        lightParent.lightChildren.push(component)
      }

      components.push(component)

      // regardless of hasShadowRoot, an element can have light DOM children
      lightParentStack.unshift(component)

      if (component.hasShadowRoot) {
        components.push(
          ...getAllComponents(walkerFunc, element.shadowRoot, component)
        )
      }
    }
  }

  return components
}

function getCustomElementType(el) {
  return el.tagName.includes('-')
    ? 'autonomous'
    : el.hasAttribute('is')
    ? 'built-in'
    : null
}

function isAncestor(child, ancestor) {
  let parent = child.parentNode

  while (parent) {
    if (parent === ancestor) {
      return true
    }

    parent = parent.parentNode
  }

  return false
}

function createComponentIterator(root) {
  return document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT, null)
}

function createComponentTreeWalker(root) {
  return document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null)
}

Tests:

NodeIterator
console.log(getAllComponents(createComponentIterator))
TreeWalker
console.log(getAllComponents(createComponentTreeWalker))

Run results for: NodeIterator vs TreeWalker for Component Extraction (FIXED)

previous version used TreeWalker for both /facepalm

NodeIterator

TreeWalker