Run results for: Built-in Flat vs Custom Recursive Concatenation vs Custom iterative Concatenation

Run details:

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

Browser: Chrome 143

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 5 months ago

Test name	Executions per second
Array.flat().join()	70130.0 Ops/sec
Stringify	231165.2 Ops/sec

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}

function generateRandomTree(depth, maxChildren) {
    if (depth <= 0) {
        return `<span>Data-${Math.random().toFixed(2)}</span>`;
    }

    const childrenCount = Math.floor(Math.random() * maxChildren) + 1;
    const arr = [];

    arr.props = {
        id: Math.random()
    };
    arr.push(`<div>`);

    for (let i = 0; i < childrenCount; i++) {
        if (Math.random() > 0.2) {
            arr.push(generateRandomTree(depth - 1, maxChildren));
        } else {
            arr.push("text-node");
        }
    }

    arr.push(`</div>`);

    return arr;
}

// Method A: Built-in Flat
function renderFlat(tree) {
    return tree.flat(Infinity).join('');
}

// Method B: Custom Recursive Concatenation
function renderRecursive(node) {
    if (typeof node === 'string') return node;
    if (Array.isArray(node)) {
        let str = '';
        const len = node.length;
        for (let i = 0; i < len; i++) {
            str += renderRecursive(node[i]);
        }
        return str;
    }
    return '';
}

// Method C: Custom iterative Concatenation
function renderIterative(tree) {
    let html = '';
    const stack = [tree];
    while (stack.length) {
        const node = stack.pop();
        if (typeof node === 'string') {
            html += node;
            continue;
        }

        if (Array.isArray(node)) {
            for (let i = node.length - 1; i >= 0; i--) {
                stack.push(node[i]);
            }
            continue;
        }
    }

    return html;
}

// Method C: Custom iterative Concatenation
function renderIterativeV2(tree) {
    let html = '';
    const stack = [tree];
    while (stack.length) {
        const node = stack.pop();
        if (Array.isArray(node)) {
            for (let i = node.length - 1; i >= 0; i--) {
                stack.push(node[i]);
            }
            continue;
        }

        html += node;

    }

    return html;
}

function renderIterativeV3(tree) {
    let html = '';
    const stack = [tree];
    let stackIndex = 0;

    while (stackIndex >= 0) {
        const node = stack[stackIndex];

        stackIndex--;

        if (typeof node === 'string') {
            html += node;
            continue;
        }

        if (Array.isArray(node)) {
            // Push children manually
            for (let i = node.length - 1; i >= 0; i--) {
                stackIndex++;
                stack[stackIndex] = node[i];
            }
            continue;
        }

        if (typeof node === 'number') {
            html += node;
        }
    }

    return html;
}

function renderIterativeV4(tree) {
    let html = '';
    const stack = [tree];
    while (stack.length) {
        const node = stack.pop();
        if (typeof node === 'string') {
            html += node;
            continue;
        }

        for (let i = node.length - 1; i >= 0; i--) {
            stack.push(node[i]);
        }
    }

    return html;
}

const array = generateRandomTree(5, 10)

Tests:

Array.flat().join()
const results = renderFlat(array)
Recursive
const results = renderRecursive(array)
Iterative
const results = renderIterative(array)
Iterative v2
const results = renderIterativeV2(array)
Iterative v3
const results = renderIterativeV3(array)
Iterative v4
const results = renderIterativeV4(array)

Run results for: Built-in Flat vs Custom Recursive Concatenation vs Custom iterative Concatenation

Array.flat().join()

Recursive

Iterative

Iterative v2

Iterative v3

Iterative v4