Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
Methods for creating many items (sized up)
Compare creating from a huge string against creating many copies.
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=614976" 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/135.0.0.0 Safari/537.36 OPR/120.0.0.0
Browser:
Opera 120
Operating system:
Mac OS X 10.15.7
Device Platform:
Desktop
Date tested:
one year ago
Create many copies.
10/s
Create huge string, add data to dom.
6/s
Create huge string with values.
6/s
View exact numbers
Test name
Executions per second
✓
Create many copies.
10 Ops/sec
Create huge string, add data to dom.
6 Ops/sec
Create huge string with values.
6 Ops/sec
Script Preparation code:
const div = document.createElement('div'); const data = []; const n = 1000; for (let i=0; i<n; i++) { data[i] = self.crypto.randomUUID() }
Tests:
Create many copies.
const template = document.createElement('template'); template.innerHTML = '<label><input type="radio" name="edit"><span></span></label>'; for (let j=0; j<100; j++) { div.replaceChildren( ...data.map(value => { const item = template.content.firstElementChild.cloneNode(true) item.querySelector('input').value = value item.querySelector('span').textContent = value return item }) ) }
Create huge string, add data to dom.
for (let j=0; j<100; j++) { const template = document.createElement('template'); template.innerHTML = '<label><input type="radio" name="edit"><span></span></label>'.repeat(data.length); const content = template.content.cloneNode(true) content.querySelectorAll('input').forEach( (input, i) => input.value = data[i]) content.querySelectorAll('span').forEach( (span, i) => span.textContent = data[i]) div.replaceChildren(content) }
Create huge string with values.
for (let j=0; j<100; j++) { const template = document.createElement('template'); template.innerHTML = data.map(v => `<label><input type="radio" name="edit" value="${v}"><span>${v}</span></label>` ).join('') div.replaceChildren(template.content.cloneNode(true)) }