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: 5 months 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

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

JS bench (version: 1) Benchmark.js

a

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

Created: 5 months ago by: Guest

Go to the latest result

classList.toggle

className

style.background

property

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

JS bench (version: 1) Benchmark.js

a

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

Created: 5 months ago by: Guest

Go to the latest result

classList.toggle

className

style.background

property

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

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