Benchmark: className vs. classList (comparing and adding)2

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { if(element.className.baseVal.indexOf("test") > -1) { element.className.baseVal = "bar"; }else { element.className.baseVal = "test"; } }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { if(element.classList.contains("test")) { element.classList.add("bar"); } else { element.classList.add("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 its test cases.

**Benchmark Overview**

The benchmark measures the performance difference between two approaches for adding or modifying classes on an HTML element: using `baseVal` (a part of the `className` property) versus using `classList`. The goal is to determine which approach is faster.

**Test Cases**

There are two test cases:

1. **className**: This test case uses the older way of accessing and modifying class names, specifically the `className.baseVal` syntax.
2. **classList**: This test case uses the newer way of accessing and modifying class names, specifically the `element.classList.contains()` and `element.classList.add()` methods.

**Comparison**

In this benchmark, both approaches are compared in terms of performance (measured by executions per second). The tests create a HTML element with an ID of "foo" and then perform 1000 iterations where it checks if the class name contains "test". If it does, it sets the `baseVal` to "bar", otherwise it sets it to "test".

**Pros and Cons**

1. **className (older approach)**:
	* Pros: Wide browser support (older versions of browsers still support this syntax).
	* Cons: Less readable and maintainable code due to the use of `baseVal`.
2. **classList (newer approach)**:
	* Pros: More modern, readable, and maintainable code.
	* Cons: Requires support for modern JavaScript features and DOM APIs.

**Library/ Framework**

There is no explicit library or framework mentioned in this benchmark. However, it's worth noting that `classList` method is a part of the W3C Web APIs (2009) standard, which provides a standardized way to access and modify class names on HTML elements.

**JavaScript Features/Syntax**

The test case uses modern JavaScript features such as:

* Closure syntax (`while (i--)`)
* String concatenation (`\r\n`)

These features are part of the ECMAScript 5 (ES5) standard, which was introduced in 2009. The use of `classList` method also relies on modern browser support for this API.

**Other Alternatives**

If you were to rewrite these tests with a focus on performance and readability, you might consider using:

* A library like jQuery or Lodash that provides more efficient class manipulation methods.
* A custom implementation using native JavaScript APIs (e.g., `document.querySelector()`).
* A benchmarking framework like Benchmark.js or Benchmark.ch, which provide more advanced features for measuring performance.

Keep in mind that the choice of alternative approaches depends on your specific use case and requirements.

Related benchmarks:

className vs. classList (comparing and adding)2 (version: 0)

Comparing performance of: className vs classList

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