Run results for: JS bench

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: 28 days ago

Test name	Executions per second
classList.toggle	908.0 Ops/sec
className	4493.1 Ops/sec
style.background	605.7 Ops/sec
property	958.9 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'); }

a

classList.toggle

className

style.background

property