Benchmark: JS bench - MeasureThat.net

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'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classList.toggle
className
style.background
property

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 28 days ago)

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/OS: Chrome 147 on Windows

View result in a separate tab

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

Related benchmarks:

JS bench (version: 1)

a

Comparing performance of: classList.toggle vs className vs style.background vs property

Created: 28 days ago by: Guest

Jump to the latest result

classList.toggle

className

style.background

property

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A