Benchmark: set Class vs set Name2

Script Preparation code:

let bestTable = document.createElement('body');


for (i = 0; i < 1000; i++) {
    let Array = document.createElement("div");
    bestTable.append(Array[i]);
}

Tests:

set Class
let el=document.getElementsByTagName('div'); for (let array of el){ array.classList.add('good'); }
set Name
let el=document.getElementsByTagName('div'); for (let array of el){ array.name="good"; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
set Class
set Name

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
set Class	1021305.7 Ops/sec
set Name	2822827.8 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 benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is testing two approaches to add a class or property to an array of HTML elements:

1. `set Class` (Test Name: "set Class")
2. `set Name2` (Test Name: "set Name")

The script preparation code creates 1000 HTML elements (`div`) and appends them to the `body` element.

**Options being compared**

In this benchmark, we have two options:

1. `array.classList.add('good')`: This approach uses the `classList` property of an array element to add a class.
2. `array.name="good"`: This approach sets a custom property `name` on an array element and assigns it the value `"good"`.

**Pros and Cons**

Here are some pros and cons of each approach:

* `array.classList.add('good')`:
	+ Pros:
		- More efficient, as it only adds a class without modifying the underlying DOM.
		- No risk of overwriting existing properties or classes.
	+ Cons:
		- Only supported in HTML5 (Chrome 120 and later).
		- Might not work in older browsers.
* `array.name="good"`:
	+ Pros:
		- More compatible with older browsers.
		- Works even if the element doesn't have a class.
	+ Cons:
		- Creates a custom property, which might lead to unexpected behavior or conflicts with other code.

**Library and special JS feature**

There is no explicit library mentioned in the benchmark definition. However, note that using `classList` requires support for HTML5, which is not universally supported.

No special JavaScript features are used in this benchmark, as both approaches are standard JavaScript syntax.

**Other alternatives**

If you need to add classes or properties to array elements in older browsers, you can consider alternative approaches:

1. Use the `innerHTML` property with a string that includes the class name (e.g., `array.innerHTML += ' good';`). This method is not recommended, as it can lead to security issues and performance degradation.
2. Set the `style` attribute directly on the element (e.g., `array.style.color = 'red';`). This approach works in older browsers but may not be as efficient or readable as using `classList`.

Keep in mind that these alternative approaches are generally considered less efficient and more error-prone than using `classList` or setting custom properties.

The benchmark result shows the execution time for each test case, with "set Name" being faster on Chrome 120 (Desktop, Windows).

Related benchmarks:

set Class vs set Name2 (version: 1)

Comparing performance of: set Class vs set Name

Created: 2 years ago by: Registered User

Jump to the latest result

set Class

set Name

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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