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'

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

Test name	Executions per second
lastElementChild	2680.6 Ops/sec
firstElementChild	2941.8 Ops/sec
dn, then lastelement	3313.4 Ops/sec
gnode	1995.9 Ops/sec
gnode2	2073.4 Ops/sec

Related benchmarks:

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

Jump to the latest result

lastElementChild

firstElementChild

dn, then lastelement

gnode

gnode2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A