Benchmark: classList contains+add vs. add-only

HTML Preparation code:

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

Script Preparation code:

var test_element = document.getElementById("foo");
if (Math.random() < 0.5) { test_element.classList.add('scrolling'); }

Tests:

contains + add
if (!test_element.classList.contains('scrolling')) { test_element.classList.add('scrolling'); }
add only
test_element.classList.add('scrolling');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
contains + add
add only

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 on MeasureThat.net and explain what's being tested.

**Overview**

The benchmark compares two approaches for adding a class to an HTML element using the `classList` API: either by checking if the class is already present (`contains`) or by directly calling the `add()` method without checking. This comparison aims to measure which approach is faster in different scenarios.

**Benchmark Preparation Code**

The preparation code creates an HTML element with an ID of "foo" and a script that randomly decides whether to add the class "scrolling" to the element using either the `contains` or `add` methods.

**Individual Test Cases**

There are two test cases:

1. **"contains + add"`**: This test case checks if the class "scrolling" is present in the element's class list and, if not, adds it using the `add()` method.
2. **"add only"`**: This test case directly calls the `add()` method without checking if the class is already present.

**Library: `classList`**

The `classList` API is a part of the W3C standard and is supported by most modern browsers, including Firefox 87 in this benchmark. The `classList` property returns a `DOMTokenList`, which is an array-like object that provides methods for manipulating class names.

The `contains()` method checks if a specific class name is present in the element's class list, while the `add()` method adds a new class to the list without checking for duplicates.

**Special JS Feature: None**

There are no special JavaScript features or syntax used in this benchmark that aren't part of the standard language.

**Pros and Cons of Each Approach**

1. **"contains + add"`**:
	* Pros: More efficient when adding multiple classes, as it avoids unnecessary class name lookups.
	* Cons: May be slower for single-class additions due to the class name lookup.
2. **"add only"`**:
	* Pros: Faster for single-class additions, as it avoids class name lookups.
	* Cons: May lead to duplicate classes if not used carefully.

**Other Alternatives**

In general, when working with HTML elements and class names in JavaScript, other approaches might include:

1. Using the `getAttribute()` method to set or get individual CSS attributes (e.g., `element.getAttribute('class')`).
2. Utilizing libraries like jQuery or Lodash for more complex DOM manipulations.
3. Implementing custom class management logic using arrays or objects.

Keep in mind that these alternatives might have different performance characteristics and trade-offs compared to the `classList` API used in this benchmark.

Related benchmarks:

classList contains+add vs. add-only (version: 0)

Comparing performance of: contains + add vs add only

Created: 5 years ago by: Guest

Jump to the latest result

contains + add

add only

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