Applying classes using different methods

Benchmark created on

Preparation HTML

<div id=testDiv></div>

Setup

CLASS_ONE = "class-one";
CLASS_TWO = "class-two";
CLASS_THREE = "class-three";

Test runner

Ready to run.

Testing in
TestOps/sec
className -- single
const div = document.createElement("div");
testDiv.appendChild(div);
div.className = CLASS_ONE;
testDiv.removeChild(div);
ready
classList.add() -- single
const div = document.createElement("div");
testDiv.appendChild(div);
div.classList.add(CLASS_ONE);
testDiv.removeChild(div);
ready
className -- multiple
const div = document.createElement("div");
testDiv.appendChild(div);
div.className = `${CLASS_ONE} ${CLASS_TWO} ${CLASS_THREE}`;
testDiv.removeChild(div);
ready
classList.add -- multiple
const div = document.createElement("div");
testDiv.appendChild(div);
div.classList.add(CLASS_ONE, CLASS_TWO, CLASS_THREE);
testDiv.removeChild(div);
ready

Revisions

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