Benchmark: Methods for creating many items

Script Preparation code:

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>'; const div = document.createElement('div'); 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.
const template = document.createElement('template'); template.innerHTML = '<label><input type="radio" name="edit"><span></span></label>' * data.length; const div = document.createElement('div'); template.content.querySelectorAll('input').forEach( (input, i) => input.value = data[i]) template.content.querySelectorAll('span').forEach( (span, i) => span.textContent = data[i]) div.replaceChildren(template.content)

Rendered benchmark preparation results:

Previous results

Test case name	Result
Create many copies.
Create huge string.

Methods for creating many items (version: 1)