Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
className scan vs classList contains vs className split includes
(version: 0)
Comparing performance of:
className scan vs classList contains vs className split includes
Created:
4 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
var el = document.createElement('div'); el.className = 'foo bar baz hello world';
Tests:
className scan
var i = 1000; while (i--) { /\bhello\b/.test(el.className); }
classList contains
var i = 1000; while (i--) { el.classList.contains('hello'); }
className split includes
var i = 1000; while (i--) { el.className.split(' ').includes('hello'); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
className scan
classList contains
className split includes
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Measuring the performance of different JavaScript approaches can be a challenging task, but I'll break it down for you. **Benchmark Overview** The provided benchmark compares three approaches to check if a string contains a specific substring: 1. `className scan`: Directly scanning the `className` property of an HTML element. 2. `classList contains`: Using the `contains()` method on the `classList` property, which is a part of the Web APIs for working with classes and styles in CSS. 3. `className split includes`: Splitting the `className` string into individual substrings using spaces as separators and checking if one of them matches the target substring. **Approach Descriptions** ### 1. className scan This approach involves directly accessing the `className` property of an HTML element, which is a string that contains multiple class names separated by spaces. To check if a specific substring exists, you would iterate through each space-separated value and perform a regular expression search (`/\\bhello\\b/.test(el.className)`) to find matches. **Pros:** * Can be implemented using only standard JavaScript features. * Simple to understand and implement. **Cons:** * May not be as efficient as other approaches, especially for large class names or many classes. * May require more iterations to check for the desired substring. ### 2. classList contains The `classList.contains()` method is a part of the Web APIs for working with classes and styles in CSS. This approach uses this method to check if a specific substring exists within the `className` property. **Pros:** * More efficient than scanning the string manually, as it takes advantage of the optimized implementation provided by the browser. * Less prone to errors, as the implementation is standardized across browsers. **Cons:** * Requires access to the `classList` property, which may not be available in all environments (e.g., older browsers). * May introduce additional overhead due to the method call and parameter passing. ### 3. className split includes This approach involves splitting the `className` string into individual substrings using spaces as separators and then checking if one of them matches the target substring (`el.className.split(' ').includes('hello')`). **Pros:** * Can be more efficient than scanning the string manually, especially for shorter class names or fewer classes. * Simplifies the implementation compared to manual iteration. **Cons:** * May not be as efficient as using `classList.contains()` due to the additional string splitting and comparison steps. * Requires careful handling of edge cases (e.g., leading/trailing spaces, duplicate substrings). **Library Usage** In this benchmark, no explicit libraries are used. However, it is implied that the browser's built-in Web APIs for working with classes and styles (`classList.contains()`) are being utilized. **Special JS Features or Syntax** No special JavaScript features or syntax are used in these approaches. They rely on standard JavaScript features like regular expressions, string manipulation, and method calls. **Other Alternatives** If you need to measure the performance of other approaches, here are a few alternatives: * Using `element.getAttribute('class')` instead of `el.className` * Utilizing a custom implementation for substring matching (e.g., using Boyer-Moore or Knuth-Morris-Pratt algorithms) * Comparing the results with alternative string manipulation libraries like `lodash.string`
Related benchmarks:
className.indexOf vs. classList.contains 1
className.includes vs classList.contains
classList.contains vs. a
long vs short classlist contains
querySelector(class) vs classList.contains
Comments
Confirm delete:
Do you really want to delete benchmark?