Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Run results for:
classlist vs classname
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=510760" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/115.0
Browser:
Firefox 115
Operating system:
Linux
Device Platform:
Desktop
Date tested:
2 years ago
Benchmark engine:
Benchmark.js
classname
452K/s
classlist
90K/s
View exact numbers
Test name
Executions per second
✓
classname
451,776 Ops/sec
classlist
89,872 Ops/sec
HTML Preparation code:
<div id='s'></div> <div id='s2'></div>
Tests:
classlist
let node = document.getElementById('s'), whitelist = ['add', 'remove', 'toggle']; function classlist(element, actions) { for (let i = 0, n = whitelist.length; i < n; i++) { let action = whitelist[i], classnames = actions[action], list = []; if (!classnames) { continue; } else if (!Array.isArray(classnames)) { classnames = [classnames]; } for (let j = 0, o = classnames.length; j < o; j++) { let classname = classnames[j], type = typeof classname; if (classname && (type === "string" || type === "number")) { list.push(classname); } } if (list) { element.classList[action](...list); } } } classlist(node, { add: ['foo', 'bar', 'baz', 'bam'], remove: ['bam'] });
classname
let node = document.getElementById('s2'); function classlist(classes, names) { let type = typeof names; if ((type === "string" || type === "number") && !classes.includes(names)) { classes.push(names); } else if (Array.isArray(names)) { for (let i = 0, n = names.length; i < n; i++) { classes = classlist(classes, names[i]); } } else if (type === 'object') { for (let key in names) { let value = names[key]; if (value) { if (value === 'toggle') { key = classes.includes(key) ? { [key]: false } : [key]; } classes = classlist(classes, key); } else { let index = classes.indexOf(key); if (index > -1) { classes.splice(index, 1); } } } } return classes; } node.className = classlist(node.className.split(' '), ["foo", ["bar", { baz: true, bam: false }]]).join(' ');