single vs multiple append (v5)

Revision 5 of this benchmark created on

Setup

const temp1 = document.createDocumentFragment()
const temp2 = document.createDocumentFragment()
const temp3 = document.createDocumentFragment()
const temp4 = document.createDocumentFragment()
const times = [...Array(5000).keys()]

Test runner

Ready to run.

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

Revisions

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