Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
JavaScript className.indexOf vs. classList.contains
(version: 0)
Comparing performance of:
className.indexOf vs classList.contains
Created:
6 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="foo" class="test"></div>
Tests:
className.indexOf
var element = document.getElementById("foo"); var i = 1000000; while (i--) { if (element.className.indexOf("test") !== -1) {} }
classList.contains
var element = document.getElementById("foo"); var i = 1000000; while (i--) { element.classList.contains("test"); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
className.indexOf
classList.contains
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
8 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:145.0) Gecko/20100101 Firefox/145.0
Browser/OS:
Firefox 145 on Mac OS X 10.15
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=621719" width="100%" height="500px"></iframe>
classList.contains
908/s
className.indexOf
506/s
View exact numbers
Test name
Executions per second
✓
classList.contains
908 Ops/sec
className.indexOf
506 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down what's being tested in the provided benchmark. **Benchmark Overview** The benchmark compares two ways to check if an HTML element contains a specific class: `className.indexOf` and `classList.contains`. The goal is to determine which method is faster. **Options Compared** Two approaches are compared: 1. **`className.indexOf`**: This method searches for the presence of the class name in the `className` property of the element using the `indexOf()` method. 2. **`classList.contains`**: This method checks if the element contains a specific class by calling the `contains()` method on the `classList` object. **Pros and Cons** 1. **`className.indexOf`**: * Pros: This method is more widely supported across older browsers, as it's based on the DOM Level 2 specification. * Cons: It can be slower due to its more complex logic and potential caching issues. The `indexOf()` method returns -1 if not found, which may lead to unnecessary computations in some cases. 2. **`classList.contains`**: * Pros: This method is generally faster and more efficient, as it uses a cached array of classes for each element. It's also more modern and widely supported across newer browsers. * Cons: This method requires the `classList` property to be implemented by the browser, which may not be available in older versions. **Library** In this benchmark, no library is explicitly mentioned, but it's worth noting that `classList.contains()` relies on the `classList` object, which is a part of the DOM Standard (DOM Level 3). **Special JavaScript Feature or Syntax** There are no special features or syntaxes being tested in this benchmark. The focus is solely on comparing two different ways to check for class presence. **Benchmark Results** The latest benchmark results show that `classList.contains()` outperforms `className.indexOf()`, with execution rates of 8.75 and 55.51 executions per second, respectively. This suggests that `classList.contains()` is faster due to its optimized implementation and wider browser support. **Alternatives** If you're interested in exploring alternative approaches, here are a few options: 1. **Regular expressions**: You can use regular expressions (e.g., `\btest\b`) to search for the class name. This approach may be slower than `classList.contains()` but provides more flexibility. 2. **Substring searching**: Another approach is to use substring searching (e.g., `element.className.substring(element.className.indexOf("test")) !== "")`. While not as efficient as `classList.contains()`, this method can provide similar results. Keep in mind that the choice of implementation depends on your specific requirements, performance needs, and browser support considerations.
Related benchmarks
Js Search -String IndexOf vs Includes
JavaScript search() vs indexOf()
queryselector vs getelementbyid with classes and ids
Comments
Confirm delete:
Do you really want to delete benchmark?