Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Javascript classList.contains vs element.matches
(version: 0)
Comparing performance of:
matches vs classList
Created:
4 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div class="foo bar"></div>
Tests:
matches
const element = document.querySelector('.foo'); var i = 1000; while (i--) { element.matches(".foo.bar"); }
classList
const element = document.querySelector('.foo'); var i = 1000; while (i--) { element.classList.contains('foo') && element.classList.contains('bar'); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
matches
classList
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64; rv:123.0) Gecko/20100101 Firefox/123.0
Browser/OS:
Firefox 123 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=508249" width="100%" height="500px"></iframe>
classList
360K/s
matches
7K/s
View exact numbers
Test name
Executions per second
✓
classList
359,931 Ops/sec
matches
6,611 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and explain what's being tested. **Benchmark Overview** The benchmark is comparing two approaches to check if an HTML element contains a specific class: `element.matches` (also known as "CSS Selectors") vs `element.classList.contains('foo') && element.classList.contains('bar')`. **What are we testing?** We're testing the performance of these two approaches on different browsers and devices. **Options Compared** The benchmark is comparing two options: 1. **`element.matches(" .foo.bar ")`**: This uses CSS selectors to check if the element contains a class with the name `foo.bar`. This approach is fast because it's optimized for DOM queries. 2. **`element.classList.contains('foo') && element.classList.contains('bar')`**: This checks if each of the classes `foo` and `bar` are present on the element using the `classList` property. **Pros and Cons** 1. **`element.matches(" .foo.bar ")`**: * Pros: Fast, optimized for DOM queries. * Cons: Only works with CSS selectors, not directly with class names. 2. **`element.classList.contains('foo') && element.classList.contains('bar')`**: * Pros: Works directly with class names, can be used when CSS selectors are not available or too slow. * Cons: May be slower due to the extra function call and check. **Library/Functionality** In this benchmark, we're using: 1. **CSS Selectors**: Built-in JavaScript API for selecting elements based on CSS rules. 2. **`classList` property**: A DOM method that returns an iterable of classes present on an element. **Special JS Feature/Syntax** This benchmark uses the `const` keyword for variable declaration, which is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). **Other Considerations** 1. **Browser Support**: The benchmark tests performance on Firefox 123, but it's likely that other browsers may have different performance characteristics. 2. **Device Platform**: The test runs on desktop Linux devices, which might not represent the full range of possible platforms and devices. **Alternatives** If you wanted to create a similar benchmark, you could consider: 1. Testing other class-related methods, such as `element.classList.contains()` with multiple classes or using a different library like jQuery. 2. Adding more browsers, device platforms, or operating systems to test the performance in different scenarios. 3. Comparing performance on other DOM queries, such as `document.querySelectorAll(".foo.bar")` vs `array.prototype.some.call(arrayOfElements, element => element.classList.contains("foo.bar"))`.
Related benchmarks
#2 Array Includes vs. Find
queryselector vs getelementbyid with classes and ids
Comments
Confirm delete:
Do you really want to delete benchmark?