single vs multiple append (v6)

Revision 6 of this benchmark created on

Preparation HTML

<template id='test'><div>Hello, World #</div></template>

Setup

const times = [...Array(5000).keys()]

Test runner

Ready to run.

Testing in
TestOps/sec
spread insertion
const temp = document.createDocumentFragment()
temp.append(...times.map(i => {
	const div = document.createElement('div')
	div.textContent = 'Hello, World #' + i + '!'
	return div
}))
ready
loop insertion
const temp = document.createDocumentFragment()
for (i of times) {
	const div = document.createElement('div')
	div.textContent = 'Hello, World #' + i + '!'
	temp.append(div)
}
ready
literal spread insertion
const temp = document.createDocumentFragment()
temp.append(...times.map(i => {
	const frag = document.createElement('template')
	frag.innerHTML = `<div>Hello, World #${i}!</div>`
	return frag.content
}))
ready
literal loop insertion
const temp = document.createDocumentFragment()
for (i of times) {
	const frag = document.createElement('template')
	frag.innerHTML = `<div>Hello, World #${i}!</div>`
	temp.append(frag.content)
}
ready
template spread insertion
const temp = document.createDocumentFragment()
const test = document.getElementById('test')

temp.append(...times.map(i => {
	const div = document.importNode(test, true).content.firstChild
	div.textContent = `Hello, World #${i}!`
	return div
}))
ready
template loop insertion
const temp = document.createDocumentFragment()
const test = document.getElementById('test')

for (i of times) {
	const div = document.importNode(test, true).content.firstChild
	div.textContent = `Hello, World #${i}!`
	temp.append(div)
}
ready
template append spread insertion
const temp = document.createDocumentFragment()
const test = document.getElementById('test')

temp.append(...times.map(i => {
	const div = document.importNode(test, true).content.firstChild
	div.append(document.createTextNode(i + '!'))
	return div
}))
ready
template append loop insertion
const temp = document.createDocumentFragment()
const test = document.getElementById('test')

for (i of times) {
	const div = document.importNode(test, true).content.firstChild
	div.append(document.createTextNode(i + '!'))
	temp.append(div)
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.