Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Javascript classList.contains vs element.matches vs classList.some
(version: 0)
Comparing performance of:
matches vs classList vs classList some
Created:
4 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<body class="foo bar baz"></body>
Tests:
matches
var i = 1000; while (i--) { if (document.body.matches(".foo.baz")) { return true; } }
classList
var i = 1000; while (i--) { if (document.body.classList.contains('foo') && document.body.classList.contains('baz')) { return true; } }
classList some
var i = 1000; while (i--) { if (['foo', 'baz'].some(className => document.body.classList.contains(className))) { return true; } }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
matches
classList
classList some
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
6 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0
Browser/OS:
Firefox 35 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
matches
5748181.5 Ops/sec
classList
2312090.2 Ops/sec
classList some
5574144.5 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll break down the provided benchmark and explain what's being tested, the options compared, their pros and cons, and other considerations. **Benchmark Overview** The provided benchmark measures the performance of three different methods to check if an element matches a certain class in JavaScript: 1. `element.matches()` 2. `classList.contains()` (on the `element` itself) 3. `some()` method on the `classList` array These methods are compared for their execution speed, and the benchmark aims to identify which one is the fastest. **Options Compared** The three options being tested are: 1. **`element.matches()`**: This method is introduced in HTML5 and allows checking if an element matches a CSS selector. It's part of the DOM API and is supported by most modern browsers. 2. **`classList.contains()`**: This method is part of the DOM API and allows checking if a class is present on an element. However, it only works when called on the `element` itself, not on the `element's classList`. 3. **`some()` method on the `classList` array**: This method iterates over the classes in the `classList` array and returns `true` as soon as a match is found. **Pros and Cons of Each Approach** 1. **`element.matches()`** * Pros: Fast, modern, and widely supported. * Cons: May not be supported in older browsers or environments that don't have CSS selectors enabled. 2. **`classList.contains()`** * Pros: Simple, easy to understand, and works in most browsers. * Cons: Only checks for the presence of a single class, not for matching multiple classes. Also, it only works on the `element` itself, not on the `element's classList`. 3. **`some()` method on the `classList` array** * Pros: Can check for multiple classes and is more flexible than `classList.contains()`. However, it may be slower due to the iteration. * Cons: May be slower due to the iteration over the classes array. **Library Used** None of these methods rely on any external libraries. They are part of the standard JavaScript DOM API or built-in features. **Special JS Feature/Syntax** None of the tested methods use special JavaScript features or syntax that would affect their performance. **Benchmark Preparation Code** The provided HTML preparation code creates a simple `body` element with three classes: `foo`, `bar`, and `baz`. **Other Alternatives** In addition to these three options, other methods can be used to check if an element matches a class, such as: * Using a CSS selector library like `css-selector` or `jsdom` * Using a regex-based approach * Using a framework-specific method (e.g., React's `useMemo` hook) However, these alternatives are not part of the standard JavaScript DOM API and may have different performance characteristics. In summary, the benchmark aims to identify the fastest way to check if an element matches a class in modern browsers. The results will help developers make informed decisions about which method to use for their specific use cases.
Related benchmarks:
className.indexOf vs. classList.contains 1
classList.contains vs. a
long vs short classlist contains
DataAttribute vs Class Selector on body
Comments
Confirm delete:
Do you really want to delete benchmark?