Benchmark: className.indexOf vs. classList.contains (fixed)

HTML Preparation code:

<div id="foo" class="test test2"></div>

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { if ((" " + element.className + " ").indexOf(" "+"test"+" ") !== -1) {} }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { element.classList.contains("test"); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
classList

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):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested, the options compared, their pros and cons, and other considerations.

**Benchmark Overview**

The benchmark measures the performance difference between two approaches: using `indexOf` on the `className` property of an element versus using `classList.contains()` for a specific class name. The test creates a simple HTML structure with an element containing the class "test" and iterates over a large number of iterations to simulate a load.

**Benchmark Definition**

The benchmark definition is provided in JSON format, which includes:

*   A brief description of the benchmark.
*   Script preparation code (in this case, none).
*   HTML preparation code: an HTML structure with a single `<div>` element containing the class "test" and "test2".

**Individual Test Cases**

There are two test cases:

1.  **className**: This test case uses the `indexOf` method on the `className` property of the element to check if it contains the string "test". The loop iterates 1000 times, and for each iteration, the condition checks if the class name includes "test".
2.  **classList**: This test case uses the `classList.contains()` method to check if the element has a class named "test". The loop also iterates 1000 times, and for each iteration, this condition is evaluated.

**Library and Purpose**

*   None (no external library is used in this benchmark).
*   `document.getElementById()` is a native DOM method that retrieves an HTML element by its ID.
*   `classList` is a property of the `HTMLElement` interface in JavaScript, which provides methods to check if an element has one or more classes.

**Special JS Feature or Syntax**

None mentioned.

**Pros and Cons of Each Approach**

*   **indexOf**: This method scans the entire class name string for the specified substring. Its performance can degrade as the class names are longer.
    *   Pros: widely supported across browsers, relatively fast in older browsers.
    *   Cons: less efficient than `classList.contains()` with long class names.
*   **classList.contains()**: This method checks if an element has a specific class name by iterating over its classes. It's optimized for modern browsers and provides better performance.
    *   Pros: faster, more efficient, especially with short or unique class names.
    *   Cons: not supported in older browsers.

**Other Considerations**

*   The benchmark uses a simple HTML structure with multiple class names ("test" and "test2"). This might affect the results, as `classList.contains()` might be faster due to its optimized implementation for this specific use case.
*   The test iterates over a large number of iterations (1000) to simulate a load. This can skew the results if the benchmark is run multiple times.

**Alternatives**

Other alternatives could include:

*   Using `querySelector` or `querySelectorAll` methods to select elements based on class names or attribute values.
*   Implementing custom loop structures or microoptimizations specific to your use case.
*   Considering other performance metrics, such as memory usage or garbage collection impacts.

Please note that the optimal approach may vary depending on the actual use case and requirements.

Related benchmarks:

className.indexOf vs. classList.contains (fixed) (version: 0)

Comparing performance of: className vs classList

Created: 5 years ago by: Guest

Jump to the latest result

className

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):