Benchmark: Traverse function vs NodeIterator vs TreeWalker - Ex

Script Preparation code:

// language=HTML
const html = `
    <!-- 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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>Lorem ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>
        <!-- article in end -->
    </article>
    <!-- article out end -->
`;
const template = document.createElement('template');
template.innerHTML = html;

window.testTemplate = template;

window.testTraverse = function traverse(node, use) {
    if (!node) return;

    use(node);
    traverse(node.firstChild, use);
    traverse(node.nextSibling, use);
}

​x
 
// language=HTMLconst html = `    <!-- 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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>Lorem ipsum</h1>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, nostrum.</p>        <!-- article in end -->    </article>    <!-- article out end -->`;const template = document.createElement('template');template.innerHTML = html;​window.testTemplate = template;​window.testTraverse = function traverse(node, use) {    if (!node) return;​    use(node);    traverse(node.firstChild, use);    traverse(node.nextSibling, use);}

Tests:

Traverse function

const comments = [];
testTraverse(testTemplate.content.firstChild, node => {
    if (node.nodeType === Node.COMMENT_NODE) {
        comments.push(node);
    }
});

 
const comments = [];testTraverse(testTemplate.content.firstChild, node => {    if (node.nodeType === Node.COMMENT_NODE) {        comments.push(node);    }});

NodeIterator with filter function

const nodeIterator = document.createNodeIterator(
    testTemplate.content,
    NodeFilter.SHOW_ALL,
    {
        acceptNode(node) {
            if (node.nodeType === Node.COMMENT_NODE) {
                return NodeFilter.FILTER_ACCEPT;
            }

            return NodeFilter.FILTER_REJECT;
        }
    }
);

const comments = [];
while (nodeIterator.nextNode()) {
    comments.push(nodeIterator.currentNode);
}

 
const nodeIterator = document.createNodeIterator(    testTemplate.content,    NodeFilter.SHOW_ALL,    {        acceptNode(node) {            if (node.nodeType === Node.COMMENT_NODE) {                return NodeFilter.FILTER_ACCEPT;            }​            return NodeFilter.FILTER_REJECT;        }    });​const comments = [];while (nodeIterator.nextNode()) {    comments.push(nodeIterator.currentNode);}

NodeIterator with filter param
const nodeIterator = document.createNodeIterator( testTemplate.content, NodeFilter.SHOW_COMMENT ); const comments = []; while (nodeIterator.nextNode()) { comments.push(nodeIterator.currentNode); }
const nodeIterator = document.createNodeIterator(
testTemplate.content,
NodeFilter.SHOW_COMMENT
);

const comments = [];
while (nodeIterator.nextNode()) {
comments.push(nodeIterator.currentNode);
}

TreeWalker with filter function

const treeWalker = document.createTreeWalker(
    testTemplate.content,
    NodeFilter.SHOW_ALL,
    {
        acceptNode(node) {
            if (node.nodeType === Node.COMMENT_NODE) {
                return NodeFilter.FILTER_ACCEPT;
            }

            return NodeFilter.FILTER_REJECT;
        }
    }
);

const comments = [];
while (treeWalker.nextNode()) {
    comments.push(treeWalker.currentNode);
}

 
const treeWalker = document.createTreeWalker(    testTemplate.content,    NodeFilter.SHOW_ALL,    {        acceptNode(node) {            if (node.nodeType === Node.COMMENT_NODE) {                return NodeFilter.FILTER_ACCEPT;            }​            return NodeFilter.FILTER_REJECT;        }    });​const comments = [];while (treeWalker.nextNode()) {    comments.push(treeWalker.currentNode);}

TreeWalker with filter param
const treeWalker = document.createTreeWalker( testTemplate.content, NodeFilter.SHOW_COMMENT ); const comments = []; while (treeWalker.nextNode()) { comments.push(treeWalker.currentNode); }
const treeWalker = document.createTreeWalker(
testTemplate.content,
NodeFilter.SHOW_COMMENT
);

const comments = [];
while (treeWalker.nextNode()) {
comments.push(treeWalker.currentNode);
}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Traverse function
NodeIterator with filter function
NodeIterator with filter param
TreeWalker with filter function
TreeWalker with filter param

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36

Browser/OS: Chrome 97 on Windows

View result in a separate tab

Test name	Executions per second
Traverse function	2502.4 Ops/sec
NodeIterator with filter function	579.8 Ops/sec
NodeIterator with filter param	27219.7 Ops/sec
TreeWalker with filter function	1631.1 Ops/sec
TreeWalker with filter param	33239.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 5 months ago):

It seems like you're sharing benchmark results for different JavaScript traversal methods: NodeIterator, TreeWalker, and a custom traverse function.

Based on the latest benchmark result, here's what I can infer:

TreeWalker with filter param: Chrome 97 on Windows Desktop performs best with an average of 1631 executions per second.
NodeIterator with filter param: Chrome 97 on Windows Desktop performs worse than TreeWalker, with an average of 579 executions per second.
TreeWalker with filter function: Chrome 97 on Windows Desktop also performs better than NodeIterator, with an average of 2502 executions per second.
Traverse function (not specified in the benchmark result): This method performs relatively poorly, with an average of 1631 executions per second.

Keep in mind that these results are specific to Chrome 97 on Windows Desktop and might not generalize to other browsers, devices, or scenarios. Additionally, the performance differences between these methods can depend on various factors, such as the structure and size of the DOM tree, the specific use case, and any additional overhead introduced by custom functions.

Would you like me to explain why TreeWalker performs better in this benchmark?

LLMs can make mistakes. Check important info.

It seems like you're sharing benchmark results for different JavaScript traversal methods: NodeIterator, TreeWalker, and a custom traverse function.

Based on the latest benchmark result, here's what I can infer:

* **TreeWalker with filter param**: Chrome 97 on Windows Desktop performs best with an average of 1631 executions per second.
* **NodeIterator with filter param**: Chrome 97 on Windows Desktop performs worse than TreeWalker, with an average of 579 executions per second.
* **TreeWalker with filter function**: Chrome 97 on Windows Desktop also performs better than NodeIterator, with an average of 2502 executions per second.
* **Traverse function** (not specified in the benchmark result): This method performs relatively poorly, with an average of 1631 executions per second.

Would you like me to explain why TreeWalker performs better in this benchmark?

Related benchmarks:

Traverse function vs NodeIterator vs TreeWalker - Ex (version: 0)

Let's compare the speed of 3 different ways to traverse the DOM.

Comparing performance of: Traverse function vs NodeIterator with filter function vs NodeIterator with filter param vs TreeWalker with filter function vs TreeWalker with filter param

Created: 3 years ago by: Guest

Jump to the latest result