Benchmark: Methods for creating many items (sized up)

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)) }

Rendered benchmark preparation results:

Previous results

Test case name	Result
Create many copies.
Create huge string, add data to dom.
Create huge string with values.

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/135.0.0.0 Safari/537.36 OPR/120.0.0.0

Browser/OS: Opera 120 on Mac OS X 10.15.7

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

Methods for creating many items (sized up) (version: 1)