Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
nodes clone vs text replace
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=569487" width="100%" height="500px"></iframe>
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
firstElementChild
7K/s
children[]
6K/s
lastElementChild
6K/s
View exact numbers
Test name
Executions per second
✓
firstElementChild
6,651 Ops/sec
children[]
6,391 Ops/sec
lastElementChild
5,792 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'