Benchmark: nodes clone vs text replace

HTML Preparation code:

<div id="root"></div>

Script Preparation code:

let gnode = []
// Create the outer div
const outerDiv = document.createElement('div');

// Create the inner div
const innerDiv = outerDiv.cloneNode(true)

// Create the img element
const imgElement = document.createElement('img');
imgElement.src = 'ava.jpg';

// Create the anchor element
const anchorElement = document.createElement('a');
anchorElement.className = 'b8';
anchorElement.href = 'https://seod.gitbook.io/f';
anchorElement.textContent = 'Learn more';

// Append img and anchor to inner div
innerDiv.appendChild(imgElement);
innerDiv.appendChild(anchorElement);

// Create the paragraph element
const paragraph = document.createElement('p');
paragraph.className = 'lD';
paragraph.textContent = 'Using an artificial neural network, ColorFission tries to optimize a color scheme based on an already existing one. This is based upon trying to appeal these colors to the most people. I know the importance of color schemes and combinations in design and branding, but the algorithm itself was outsourced.';

// Append inner div and paragraph to outer div
outerDiv.appendChild(innerDiv);
outerDiv.appendChild(paragraph);

let rn = document.getElementById('root')

// Append the outer div to the body or a specific element
for (let i = 0; i < 100; ++i) {
    let ox = outerDiv.cloneNode(true);
	rn.appendChild(ox);
    //gnode.push(ox);
    gnode[i]=ox;
}

Tests:

lastElementChild
let elem0 = document.getElementById('root').firstElementChild; do { let elem1 = elem0.firstElementChild; let elem1a = elem1.firstElementChild; elem1a.src = 'aubrey.jpg' elem1a = elem1a.nextElementSibling; elem1a.textContent='hello123' elem1 = elem0.lastElementChild; elem1.textContent = 'aubrey' } while (elem0 = elem0.nextElementSibling)
firstElementChild
let elem0 = document.getElementById('root').firstElementChild; do { let elem1 = elem0.firstElementChild; let elem1a = elem1.firstElementChild; elem1a.src = 'aubrey.jpg' elem1a = elem1a.nextElementSibling; elem1a.textContent='hello123' elem1 = elem1.nextElementSibling; elem1.textContent = 'aubrey' } while (elem0 = elem0.nextElementSibling)
dn, then lastelement
let rn = document.getElementById('root') rn.style.display='none' let elem0 = rn.firstElementChild; do { let elem1 = elem0.firstElementChild; let elem1a = elem1.firstElementChild; elem1a.src = 'aubrey.jpg' elem1a = elem1a.nextElementSibling; elem1a.textContent='hello123' elem1 = elem0.lastElementChild; elem1.textContent = 'aubrey' } while (elem0 = elem0.nextElementSibling) rn.style.display='block'
gnode
for (let i = 0; i < 100; ++i) { let elem0 = gnode[i] let elem1 = elem0.firstElementChild; let elem1a = elem1.firstElementChild; elem1a.src = 'aubrey.jpg' elem1a = elem1a.nextElementSibling; elem1a.textContent='hello123' elem1 = elem0.lastElementChild; elem1.textContent = 'aubrey' }
gnode2
rn.style.display='none' for (let i = 0; i < 100; ++i) { let elem0 = gnode[i] let elem1 = elem0.firstElementChild; let elem1a = elem1.firstElementChild; elem1a.src = 'aubrey.jpg' elem1a = elem1a.nextElementSibling; elem1a.textContent='hello123' elem1 = elem0.lastElementChild; elem1.textContent = 'aubrey' } rn.style.display='block'

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Replace Node indirectly

104K/s

Replace Text directly

84K/s

lastElementChild

7K/s

dn, then lastelement

7K/s

firstElementChild

7K/s

gnode

7K/s

gnode2

7K/s

children[]

6K/s

Fastest: Replace Node indirectly (17.0x faster)

View exact numbers

✓ Replace Node indirectly: 104,258 ops/sec
• Replace Text directly: 83,673 ops/sec
• lastElementChild: 7,235 ops/sec
• dn, then lastelement: 7,054 ops/sec
• firstElementChild: 7,050 ops/sec
• gnode: 6,626 ops/sec
• gnode2: 6,602 ops/sec
• children[]: 6,148 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lastElementChild
firstElementChild
dn, then lastelement
gnode
gnode2

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

dn, then lastelement

3K/s

firstElementChild

3K/s

lastElementChild

3K/s

gnode2

2K/s

gnode

2K/s

View exact numbers

Test name	Executions per second
✓ dn, then lastelement	3,313 Ops/sec
firstElementChild	2,942 Ops/sec
lastElementChild	2,681 Ops/sec
gnode2	2,073 Ops/sec
gnode	1,996 Ops/sec

nodes clone vs text replace (version: 18)

Comparing performance of: `lastElementChild vs firstElementChild vs dn, then lastelement vs gnode vs gnode2`

Created: one year ago by: Registered User

Go to the latest result

lastElementChild

firstElementChild

dn, then lastelement

gnode

gnode2

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

nodes clone vs text replace (version: 18)

Comparing performance of: lastElementChild vs firstElementChild vs dn, then lastelement vs gnode vs gnode2

Created: one year ago by: Registered User

Go to the latest result

lastElementChild

firstElementChild

dn, then lastelement

gnode

gnode2

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `lastElementChild vs firstElementChild vs dn, then lastelement vs gnode vs gnode2`