Run results for: Methods for creating many items (sized up)

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: 9 months ago

Test name	Executions per second
Create many copies.	9.7 Ops/sec
Create huge string, add data to dom.	5.9 Ops/sec
Create huge string with values.	5.5 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)) }