Benchmark: className vs. classList

HTML Preparation code:

<div class="fus roh dah" id="foo"></div>

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while (i--) { var hasClass =(" "+element.className+" ").indexOf(" roh ") >= 0; }
classList
var element = document.getElementById("foo"); var i = 1000; while (i--) { var hasClass=element.classList.contains("roh"); }

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 JavaScript microbenchmark at MeasureThat.net.

**Benchmark Definition**

The benchmark is designed to compare two approaches for checking if an HTML element has a specific class:

1. `className` approach: This method uses the `indexOf()` method to search for the presence of the class name "roh" in the element's `className` property.
2. `classList` approach: This method uses the `contains()` method provided by the `classList` property, which is a part of the HTML5 API.

**Options Compared**

The two approaches are compared in terms of their performance, specifically:

* Number of executions per second (ExecutionsPerSecond) on various devices and browsers.
* Raw UA string (User Agent) to identify the browser and device platform used for testing.

**Pros and Cons of Each Approach**

1. `className` approach:
	* Pros: Simple, widely supported, and no additional libraries required.
	* Cons:
		+ Can be slower than using `classList.contains()`, especially for large class names or multiple classes with similar prefixes.
		+ May not work as expected in some older browsers that don't support the `indexOf()` method.
2. `classList` approach:
	* Pros: Faster and more efficient, especially when dealing with large class names or multiple classes.
	* Cons:
		+ Requires HTML5 compatibility (i.e., modern browsers).
		+ May not work in older browsers that don't support the `classList` property.

**Library and Syntax**

The benchmark uses no external libraries; it relies on native JavaScript methods. However, if you're interested in exploring alternative approaches using libraries or frameworks, here are some options:

* Lodash: Provides a `contains()` method for checking if an object has a specific value.
* jQuery: Offers a `$()` function that can be used to check if an element has a specific class.

No special JavaScript features or syntax are used in this benchmark.

**Other Alternatives**

If you're interested in exploring other approaches, consider the following alternatives:

1. Using a regular expression (RegExp) instead of `indexOf()`.
2. Utilizing a string search algorithm like Boyer-Moore or Knuth-Morris-Pratt.
3. Leveraging a library like Moment.js for parsing dates and manipulating strings.

Keep in mind that these alternatives might introduce additional complexity, dependencies, or performance overhead.

**Benchmark Preparation Code**

The provided `Html Preparation Code` generates an HTML element with the class "fus roh dah" and id "foo". The `Script Preparation Code` is empty, which means the benchmark script will be executed directly in the browser context.

I hope this explanation helps you understand the JavaScript microbenchmark at MeasureThat.net!

Related benchmarks:

className vs. classList (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>

Fastest: N/A

Slowest: N/A

No previous run results

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