Run results for: JS bench - MeasureThat.net

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36

Browser: Chrome 147

Operating system: Windows

Device Platform: Desktop

Date tested: 5 months ago

Benchmark engine: Benchmark.js

className

4K/s

property

959/s

classList.toggle

908/s

style.background

606/s

View exact numbers

Test name	Executions per second
✓ className	4,493 Ops/sec
property	959 Ops/sec
classList.toggle	908 Ops/sec
style.background	606 Ops/sec

HTML Preparation code:

<style>
    .item {
      background: var(--color, black);
    }
    
    .blue {
      background: blue;
    }
</style>

<div class="root"></div>

Script Preparation code:

const root = document.createElement('div');
document.body.appendChild(root);

for (let i = 0; i < 3000; i++) {
    const el = document.createElement('div');
    el.className = 'item';
    root.appendChild(el);
}

Tests:

classList.toggle
const items = document.querySelectorAll('.item'); for (let i = 0; i < items.length; i++) { items[i].classList.toggle('blue'); }
className
const items = document.querySelectorAll('.item'); for (let i = 0; i < items.length; i++) { items[i].className = 'item blue'; }
style.background
const items = document.querySelectorAll('.item'); for (let i = 0; i < items.length; i++) { items[i].style.background = 'blue'; }
property
const items = document.querySelectorAll('.item'); for (let i = 0; i < items.length; i++) { items[i].style.setProperty('--color', 'blue'); }