Attribute Performance Pre/Post DOM Insertion

Benchmark created on

Preparation HTML

<main>
	<header>
		<h1>Example HTML</h1>
	</header>
	<section>
		<h2>Section 1</h2>
		<p>Here's some inserted content...</p>
	</section>
</main>

Teardown

const insert = document.querySelector(".inserted");


insert.parentNode.removeChild(insert);

Test runner

Ready to run.

Testing in
TestOps/sec
Before DOM
const section = document.querySelector("section");
const element = document.createElement("P");
element.className = "inserted";
element.textContent = "Inserted via JS!";

section.appendChild(element);
ready
After DOM
const section = document.querySelector("section");


const element = section.appendChild(
	document.createElement("P")	
);
element.className = "inserted";
element.textContent = "Inserted via JS!";
ready

Revisions

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