classList.contains vs matches vs some

Benchmark created on

Preparation HTML

<div class="layout-header test"></div>

Setup

let element = document.querySelector('.layout-header');

function generateRandomStrings(count = 1000, minLen = 3, maxLen = 5) {
	const chars = 'abcdefghijklmnopqrstuvwxyz';
	const result = [];

	for (let i = 0; i < count; i++) {
		const len = Math.floor(Math.random() * (maxLen - minLen + 1)) + minLen;
		let str = '';
		for (let j = 0; j < len; j++) {
			str += chars[Math.floor(Math.random() * chars.length)];
		}
		result.push(str);
	}

	return result;
}

const randomClasses = generateRandomStrings();
const classesLen = randomClasses.length;

Test runner

Ready to run.

Testing in
TestOps/sec
classList.contains
for(let i = 0; i < classesLen ; i++) {
	element.classList.contains(randomClasses[i]);
}
ready
matches
for(let i = 0; i < classesLen ; i++) {
	element.matches('.' + randomClasses[i]);
}
ready
some classlist.contains
randomClasses.some(className => document.body.classList.contains(className));
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.