Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
JS bench
a
Go to the benchmark
Embed
Embed Benchmark Result
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'); }