Run results for: createNodeIterator vs walkTheDom v2

Run details:

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

Browser: Chrome 108

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
document.createNodeIterator	395971.2 Ops/sec
walkTheDom	189112.3 Ops/sec

HTML Preparation code:

<div class="wrapper">
  <h1 class="heading">Dummy Heading</h1>
  <p class="para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique itaque repellendus aperiam ullam impedit. Nesciunt dignissimos dicta esse nostrum velit assumenda!</p>
  <h1 class="heading">Dummy Heading</h1>
  <p class="para">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique itaque repellendus aperiam ullam impedit. Nesciunt dignissimos dicta esse nostrum velit assumenda!</p>
  <ul>
    <li>repellendus</li>
    <li>consectetur</li>
    <li>adipisicing</li>
  </ul>
  <button>Click Me</button>
</div>

Tests:

document.createNodeIterator
const getTextNodes = function(root) { const iterator = document.createNodeIterator( root, NodeFilter.SHOW_TEXT, null ) const nodes = [] let currNode while (currNode = iterator.nextNode()) nodes.push(currNode) return nodes } getTextNodes(document.body)
walkTheDom
const walkTheDom = function (node, callback) { callback(node) node = node.firstChild while (node) { walkTheDom(node, callback) node = node.nextSibling } } const getTextNodes = function (root) { const nodes = [] walkTheDom (root, (node) => { if (node.nodeType === 3) nodes.push(node) }) return nodes } getTextNodes(document.body)

Run results for: createNodeIterator vs walkTheDom v2

Testing creating a collection of textNodes

document.createNodeIterator

walkTheDom