Benchmark: test123v6 - 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	1609.9 Ops/sec
setAttribute	1807.2 Ops/sec
classList	1161.7 Ops/sec

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 definition and test cases.

**Benchmark Definition**

The `Script Preparation Code` is empty, which means that no additional setup code is required to run the benchmarks. The `Html Preparation Code` is `<div id="foo" class="demo"></div>`, which creates a simple HTML element with an ID of "foo" and a class of "demo".

**Test Cases**

There are three test cases:

1. **className**: This benchmark tests how long it takes to append multiple classes to the `element` object using the `className` property.
2. **setAttribute**: This benchmark tests how long it takes to set the `class` attribute of the `element` object using the `setAttribute` method.
3. **classList**: This benchmark tests how long it takes to add multiple classes to the `element` object using the `classList.add()` method.

**Options Compared**

The options being compared are:

* `className`: Appends multiple classes to the element using the `className` property.
* `setAttribute`: Sets the `class` attribute of the element using the `setAttribute` method.
* `classList`: Adds multiple classes to the element using the `classList.add()` method.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **className**: This approach is simple and widely supported, but it can be slower due to the need for string concatenation and potential DOM manipulation.
	+ Pros: Wide support, easy to implement.
	+ Cons: Potential performance issues due to string concatenation.
* **setAttribute**: This approach sets the `class` attribute directly, which may be faster than appending classes using `className`.
	+ Pros: Faster execution time, avoids potential performance issues with string concatenation.
	+ Cons: Requires setting an empty class attribute initially, and some browsers may cache this value.
* **classList**: This approach uses the modern `classList` API, which is supported by most modern browsers. It's also faster than appending classes using `className`.
	+ Pros: Modern API, faster execution time, easier to implement.
	+ Cons: Requires support for the `classList` API, may not work in older browsers.

**Libraries and Features**

None of the test cases use any external libraries or features beyond standard JavaScript and HTML. The only feature being tested is the comparison of three different approaches to set CSS classes on an element.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax being used in these benchmarks, other than the modern `classList` API.

**Alternatives**

Other alternatives for benchmarking CSS class setting could include:

* Using a library like jQuery to simplify DOM manipulation and testing.
* Using a different approach, such as using `style` property instead of `class`.
* Adding more test cases to cover additional scenarios, such as adding/removing classes dynamically or using different unit tests.

It's worth noting that the specific choice of benchmarking framework and test cases may depend on the target audience and requirements.

Related benchmarks:

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