Benchmark: Add class attribute

HTML Preparation code:

<div id='id'></div>

Script Preparation code:

var el = document.getElementById('id');
var classes = ['aaa', 'bbb', 'ccc', 'ddd']

Tests:

add classList
el.classList.add('aaa'); el.classList.add('bbb'); el.classList.add('ccc'); el.classList.add('ddd');
add classList multi values
el.classList.add('aaa', 'bbb', 'ccc', 'ddd');
change className
el.className = 'aaa bbb ccc ddd';
add className
el.className = 'aaa'; el.className = el.className + 'bbb'; el.className = el.className + 'ccc'; el.className = el.className + 'ddd';
setAttribute
el.setAttribute('class', 'aaa bbb ccc ddd');
from array: forEach add classList
classes.forEach(cls => el.classList.add(cls));
from array: spread add classList
el.classList.add(...classes)
from array: change className
el.className = classes.join(' ');
from array: add className
classes.forEach(cls => { el.className = el.className + cls; });
from array: setAttribute
el.setAttribute('class', classes.join(' '));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
add classList
add classList multi values
change className
add className
setAttribute
from array: forEach add classList
from array: spread add classList
from array: change className
from array: add className
from array: setAttribute

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 provided benchmark definition and test cases to understand what's being tested.

**Benchmark Definition**

The `Script Preparation Code` is used to prepare the JavaScript context for running the benchmark. It declares a variable `el` that represents an HTML element with the ID "id".

**Test Cases**

The test cases measure the performance of different methods for adding classes to an element:

1. `add classList`: Using the `classList.add()` method to add individual classes.
2. `add classList multi values`: Using the `classList.add()` method to add multiple classes at once using the spread operator (`el.classList.add(...classes)`).
3. `change className`: Using the `className` property to set a single string with multiple classes separated by spaces.
4. `add className`: Using the `className` property to concatenate strings and build a class list.
5. `from array: forEach add classList`, `from array: spread add classList`, `from array: change className`, `from array: add className`, and `from array: setAttribute` are variations of the above methods using arrays.

**Options being compared**

The benchmark is comparing the performance of:

* Using individual classes with `classList.add()`
* Using multiple classes at once with the spread operator (`el.classList.add(...classes)`)
* Setting a single string with multiple classes separated by spaces (`className` property)
* Concatenating strings and building a class list using the `className` property
* Using arrays to perform these operations

**Why is this benchmark important?**

This benchmark is likely intended to measure the performance of different JavaScript engines (e.g., V8 in Google Chrome) when it comes to adding classes to HTML elements. The results can help identify which method is most efficient and may have implications for web development, especially when working with complex class lists.

**Observations from the benchmark results**

The results show that:

* Using individual classes with `classList.add()` is generally the fastest.
* Using multiple classes at once with the spread operator (`el.classList.add(...classes)`) is slower than using individual classes but faster than setting a single string with multiple classes separated by spaces (`className` property).
* Concatenating strings and building a class list using the `className` property is slower than using individual classes or the spread operator.

Keep in mind that these results may vary depending on the specific JavaScript engine, browser version, and hardware used to run the benchmark.

Related benchmarks:

Add class attribute (version: 2)

Comparing performance of: add classList vs add classList multi values vs change className vs add className vs setAttribute vs from array: forEach add classList vs from array: spread add classList vs from array: change className vs from array: add className vs from array: setAttribute

Created: 4 years ago by: Registered User

Jump to the latest result

add classList

add classList multi values

change className

add className

setAttribute

from array: forEach add classList

from array: spread add classList

from array: change className

from array: add className

from array: setAttribute

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