insertBefore(,firstChild) vs insertAdjacentElement("afterbegin") vs prepend() vs DocumentFragment{appendChild()},insertBefore(, firstChild)

Benchmark created on

Preparation HTML

<div id="list"></div>

Setup

var list = document.querySelector("#list");
var fragment = document.createDocumentFragment();

Test runner

Ready to run.

Testing in
TestOps/sec
createDocumentFragment
for(var i = 0; i<10; i++){
	for(var j = 0; j<100; j++){
		fragment.appendChild(document.createElement("div"));
	}
	list.insertBefore(fragment, list.firstChild);
}

list.textContent = "";
ready
list.insertBefore
for(var i = 0; i<1000; i++){
	list.insertBefore(document.createElement("div"), list.firstChild);
}

list.textContent = "";
ready
list.insertBefore 2
var node = null;
for(var i = 0; i<1000; i++){
	node = list.insertBefore(document.createElement("div"), node);
}

list.textContent = "";
ready
list.insertAdjacentElement
for(var i = 0; i<1000; i++){
	list.insertAdjacentElement("afterbegin", document.createElement("div"));
}

list.textContent = "";
ready
list.prepend
for(var i = 0; i<1000; i++){
	list.prepend(document.createElement("div"));
}

list.textContent = "";
ready

Revisions

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