Benchmark: test123v7 - MeasureThat.net

HTML Preparation code:

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

Tests:

className
var element = document.getElementById("foo"); var i = 1000; while(i > 0) { element.className += " bar bar2 bar3"; i--; element.className = "demo" }
setAttribute
var element = document.getElementById("foo"); var i = 1000; while(i > 0) { element.setAttribute("class", "demo bar bar2 bar3"); i--; element.className = "demo" }
classList
var element = document.getElementById("foo"); var i = 1000; while(i > 0) { element.classList.add("bar", "bar2", "bar3"); i--; element.className = "demo" }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className
setAttribute
classList

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
className	1576.1 Ops/sec
setAttribute	1808.0 Ops/sec
classList	1298.6 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark on MeasureThat.net, which tests the performance of three different approaches to update an HTML element's class attribute.

**Options Compared**

1. **setAttribute**: This approach uses the `setAttribute` method to set the value of the `class` attribute directly.
2. **className**: This approach updates the `className` property of the element instead of setting the `class` attribute directly. Note that this is not exactly the same as `setAttribute`, as it involves updating a CSS-like property.
3. **classList**: This approach uses the `classList.add()` method to add classes to the element.

**Pros and Cons**

1. **setAttribute**:
	* Pros: Simple and straightforward, widely supported by browsers.
	* Cons: May not be optimized for performance, can lead to slower updates due to CSS parsing.
2. **className**:
	* Pros: Can potentially be more efficient than `setAttribute`, as it involves updating a CSS-like property instead of setting an attribute directly.
	* Cons: Not exactly the same as `setAttribute`, may require additional workarounds in certain cases.
3. **classList**:
	* Pros: Optimized for performance, widely supported by modern browsers.
	* Cons: May not be supported in older browsers.

**Library and Syntax**

There are no explicit libraries mentioned in the benchmark definition or test cases.

However, it's worth noting that the `classList` approach uses a modern JavaScript API that was introduced in ECMAScript 2015 (ES6). This syntax is only available in modern browsers and may not work in older versions.

**Benchmark Preparation Code**

The preparation code is minimal, with only a simple HTML element being created to serve as the test subject. The `script` tags contain the benchmark definitions for each approach.

**Raw UA String and Browser Information**

The raw UA string indicates that the benchmark was run on Chrome 121 on a Macintosh platform (Mac OS X 10.15.7).

**Executions Per Second**

The executions per second values indicate the performance of each approach:

1. `setAttribute`: 1808.0086669921875 executions per second
2. `className`: 1576.1490478515625 executions per second
3. `classList`: 1298.5673828125 executions per second

**Alternatives**

If you're interested in exploring alternative approaches, some options include:

1. **Setting the class list attribute**: Instead of using `setAttribute` or `className`, you could set the `classList` attribute directly. This approach might be similar to `classList.add()`.
2. **Using a CSS class mutation API**: Some browsers offer a CSS class mutation API that allows you to update classes on an element without updating the DOM.
3. **Optimizing for performance**: Depending on your use case, you might need to optimize for performance by reducing the number of updates or using techniques like caching.

Keep in mind that each approach has its pros and cons, and the best solution will depend on your specific requirements and browser support.

Related benchmarks:

test123v7 (version: 0)

Comparing performance of: className vs setAttribute vs classList

Created: 2 years ago by: Guest

Jump to the latest result

className

setAttribute

classList

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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