Run results for: treewalker vs recursion

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36

Browser: Chrome 89

Operating system: Mac OS X 11.2.2

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
Treewalker	80868.0 Ops/sec
Recursion	50592.6 Ops/sec

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);

Run results for: treewalker vs recursion

Treewalker

Recursion