Benchmark: treewalker vs recursion

Script Preparation code:

const NEWLINE = '\n';

function isBlockElement(node) {
    return (node.nodeType === Node.ELEMENT_NODE &&
        getComputedStyle(node).display === 'block');
}
const walkers = new WeakMap();

function getOrCreateWalker(node) {
    let walker = walkers.get(node);
    if (!walker) {
        walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
        walkers.set(node, walker);
    }
    walker.currentNode = node;
    return walker;
}

function getContent1(rootNode) {
    let content = "";
    const walker = getOrCreateWalker(rootNode);
    const seen = new Set([rootNode]);
    for (let currentNode = walker.firstChild(); currentNode !== null;) {
        while (!seen.has(currentNode) && walker.firstChild() !== null) {
            seen.add(currentNode);
            currentNode = walker.currentNode;
            if (content &&
                !content.endsWith(NEWLINE) &&
                isBlockElement(currentNode)) {
                content += NEWLINE;
            }
        }
        if (currentNode.nodeType === Node.TEXT_NODE) {
            const data = currentNode.data;
            content += data;
        } else {
            if (currentNode.tagName === "BR") {
                content += NEWLINE;
            }
        }
        if (walker.nextSibling() === null) {
            if (!content.endsWith(NEWLINE) && isBlockElement(currentNode)) {
                content += NEWLINE;
            }
            currentNode = walker.parentNode();
        } else {
            currentNode = walker.currentNode;
        }
    }
    return content;
}

function getContent2(node) {
    switch (node.nodeType) {
        case Node.TEXT_NODE:
            return node.data;
        case Node.ELEMENT_NODE: {
            if (node.nodeName === 'BR') {
                return NEWLINE;
            }
            let result = '';
            for (let child = node.firstChild; child !== null; child = child.nextSibling) {
                if (result && !result.endsWith(NEWLINE) && isBlockElement(child)) {
                    result += NEWLINE;
                }
                const content = getContent2(child);
                result += content;
            }
            if (!result.endsWith(NEWLINE) && isBlockElement(node)) {
                result += NEWLINE;
            }
            return result;
        }
        default:
            return '';
    }
}

var div = document.createElement("div");
div.innerHTML = "<div><span>Hello</span><br></div><br><br><div><br><span>W</span>o<span>r</span>l<span>d</span></div>";

Tests:

Treewalker
getContent1(div);
Recursion
getContent2(div);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Treewalker
Recursion

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 136 on Android

View result in a separate tab

Test name	Executions per second
Treewalker	231039.9 Ops/sec
Recursion	204731.3 Ops/sec

Related benchmarks:

treewalker vs recursion (version: 0)

Comparing performance of: Treewalker vs Recursion

Created: 5 years ago by: Guest

Jump to the latest result

Treewalker

Recursion

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A