Run results for: nodes clone vs text replace

Run details:

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: Chrome 131

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

lastElementChild

10K/s

firstElementChild

8K/s

dn, then lastelement

7K/s

gnode

7K/s

gnode2

5K/s

View exact numbers

Test name	Executions per second
✓ lastElementChild	10,148 Ops/sec
firstElementChild	7,695 Ops/sec
dn, then lastelement	7,054 Ops/sec
gnode	6,683 Ops/sec
gnode2	5,302 Ops/sec

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'