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

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { if(element.className.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:

Run details: (Test run date: 2025 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0

Browser/OS: Firefox 58 on Windows

View result in a separate tab

Test name	Executions per second
className	564.2 Ops/sec
classList	2117.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Overview**

The provided benchmark compares two approaches to modify the `class` attribute of an HTML element: using the `className` property and using the `classList` API.

**Options Compared**

There are two test cases:

1. **`className`**: This approach uses the `className` property to set or update the value of the `class` attribute.
2. **`classList`**: This approach uses the `classList` API to add, remove, or modify classes on an element.

**Pros and Cons**

### `className` Approach

Pros:

* Wide browser support: Most browsers have supported `className` since its introduction in CSS 2.1 (2006).
* Simple and familiar syntax: Many developers are already comfortable with using `className`.

Cons:

* Performance overhead: Accessing the `className` property can lead to slower performance compared to other methods.
* Security implications: Using `className` can be vulnerable to cross-site scripting (XSS) attacks if not handled properly.

### `classList` Approach

Pros:

* Modern syntax and performance: The `classList` API is a modern feature that offers better performance and security compared to using the `className` property.
* Native support in Web APIs: Most modern browsers have native support for the `classList` API, making it a more reliable choice.

Cons:

* Limited browser support: Although widely supported, older browsers like Internet Explorer 10 and below do not natively support the `classList` API. However, some polyfills can mitigate this issue.
* Additional JavaScript overhead: The `classList` API requires additional method calls, which might introduce some overhead in certain scenarios.

**Library and Purpose**

In the provided benchmark, the `classList` API is used to add classes to an element using the `add()` method. This is a modern feature introduced in CSS 3 (2009) as part of the W3C's CSS Working Group. The purpose of this feature is to provide a standardized way to manage class names and their interactions with styles.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax mentioned in the provided benchmark.

**Other Alternatives**

If you're looking for alternative approaches to modify the `class` attribute, consider the following:

* Using CSS classes: Instead of using JavaScript to set or update class names, you can use CSS classes with media queries and CSS transitions. This approach eliminates the need for JavaScript altogether.
* Using a CSS-in-JS solution: Frameworks like React, Angular, or Vue.js provide built-in support for CSS-in-JS solutions, which allow you to define styles directly in your JavaScript code.

In conclusion, when it comes to modifying class names on an HTML element, the `classList` API is generally considered a more modern and efficient choice. However, if you need to support older browsers or have specific requirements that necessitate the use of the `className` property, consider the pros and cons mentioned above and choose the approach that best fits your needs.

Related benchmarks:

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

Comparing performance of: className vs classList

Created: 6 years ago by: Guest

Jump to the latest result

className

classList

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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