CSS Perf Test

Benchmark created on

Setup

for (let i = 0; i < 10000; i++) {
  const div = document.createElement("div");
  const dataClass = i & 2 === 0 ? "testa" : "testb";
  div.className = dataClass;
  div.setAttribute("data-role", dataClass);
  document.body.appendChild(div);
}

Teardown

document.body.innerHTML = "";

Test runner

Ready to run.

Testing in
TestOps/sec
Class
document.querySelectorAll(".testa");
ready
Data
document.querySelectorAll("[data-role='testa']");
ready
Class + Data
document.querySelectorAll(".testa[data-role='testa']");
ready
Tag + Class
document.querySelectorAll("div.testa");
ready
Tag + Class + Data

document.querySelectorAll("div.testa[data-role='testa']");
ready

Revisions

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