createElement vs cloneNode

Benchmark created on

Description

Tests if creating a new element for each iteration or keeping it and cloning it when appending is faster.

Preparation HTML

<svg id="svg"/>

Setup

let svg = document.getElementById("svg");

Test runner

Ready to run.

Testing in
TestOps/sec
createElement
for (let i = 0; i < 2; i++) {
	let line = document.createElementNS(
    	"http://www.w3.org/2000/svg",
        "line"
   		);
   		
   		line.setAttribute("a", "" + i);
   		
   	svg.appendChild(line);
}
ready
cloneNode
let line = document.createElementNS(
    	"http://www.w3.org/2000/svg",
        "line"
   		);
   		
for (let i = 0; i < 2; i++) {
	line.setAttribute("a", "" + i);
   	svg.appendChild(line.cloneNode());
}
ready

Revisions

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