Benchmark: Built-in Flat vs Custom Recursive Concatenation vs Custom iterative Concatenation

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)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.flat().join()
Recursive
Iterative
Iterative v2
Iterative v3
Iterative v4

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 months ago)

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/OS: Chrome 143 on Mac OS X 10.15.7

View result in a separate tab

Iterative

49K/s

Iterative v4

47K/s

Iterative v3

46K/s

Iterative v2

43K/s

Recursive

36K/s

Array.flat().join()

11K/s

View exact numbers

Test name	Executions per second
✓ Iterative	48,881 Ops/sec
Iterative v4	46,533 Ops/sec
Iterative v3	46,125 Ops/sec
Iterative v2	43,319 Ops/sec
Recursive	35,525 Ops/sec
Array.flat().join()	10,863 Ops/sec

Built-in Flat vs Custom Recursive Concatenation vs Custom iterative Concatenation (version: 5)

Comparing performance of: `Array.flat().join() vs Recursive vs Iterative vs Iterative v2 vs Iterative v3 vs Iterative v4`

Created: 8 months ago by: Registered User

Go to the latest result

Array.flat().join()

Recursive

Iterative

Iterative v2

Iterative v3

Iterative v4

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Built-in Flat vs Custom Recursive Concatenation vs Custom iterative Concatenation (version: 5)

Comparing performance of: Array.flat().join() vs Recursive vs Iterative vs Iterative v2 vs Iterative v3 vs Iterative v4

Created: 8 months ago by: Registered User

Go to the latest result

Array.flat().join()

Recursive

Iterative

Iterative v2

Iterative v3

Iterative v4

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `Array.flat().join() vs Recursive vs Iterative vs Iterative v2 vs Iterative v3 vs Iterative v4`