DocumentFragment vs Array (v2)

Revision 2 of this benchmark created on

Setup

for (let i = 0 ; i < 100 ; i++) {
	const el = document.createElement("div");
	document.body.appendChild(el);
}

Test runner

Ready to run.

Testing in
TestOps/sec
DocumentFragment
const fragment = document.createDocumentFragment();
fragment.replaceChildren(...document.body.childNodes);
document.body.textContent = "";
document.body.replaceChildren(...fragment.childNodes);
ready
Array
const array = [...document.body.childNodes]
;
document.body.textContent = "";
document.body.replaceChildren(...array);
ready
DocumentFragment (no clear)
const fragment = document.createDocumentFragment();
fragment.replaceChildren(...document.body.childNodes);
document.body.replaceChildren(...fragment.childNodes);
ready
Array (no clear)
const array = [...document.body.childNodes]
;
document.body.replaceChildren(...array);
ready

Revisions

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