Benchmark: addFunction vs classList (multiple)

HTML Preparation code:

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

Script Preparation code:

function addClass(el, classNames)
{
  if (!classNames) { return; }
 
        if (!Object.prototype.toString.call(classNames) === "[object Array]")
        {
            classNames = classNames.split(' ');
        }
        var className = el.getAttribute("class") || "";
 
        var i, classMap = {}, currentClasses = [], length;
 
        if (className !== null)
        {
            currentClasses = className.split(" ");
 
            length = currentClasses.length;
            for (i = 0; i < length; i++)
            {
                if (currentClasses[i] !== "")
                {
                    classMap[currentClasses[i]] = "";
                }
            }
        }
 
        var changed = false, trimmedName;
        var newAdded = [];
        length = classNames.length;
        for (i = 0; i < length; i++)
        {
            trimmedName = classNames[i].trim();
            if ((trimmedName.length > 0) && !(trimmedName in classMap))
            {
                currentClasses.push(trimmedName);
                newAdded.push(trimmedName);
                classMap[trimmedName] = "";
                changed = true;
            }
        }
 
        if (changed)
        {
            el.setAttribute("class", currentClasses.join(" ").trim());
        }
 
        return newAdded;
}

function addClass2(el, classNames)
{
  if (!classNames) { return; }
 
        if (!Object.prototype.toString.call(classNames) === "[object Array]")
        {
            classNames = classNames.split(' ');
        }
        var className = el.getAttribute("class") || "";
  
        var trimmedName;
        var newAdded = [];
        var length = classNames.length;
        var list = el.classList;
        for (i = 0; i < length; i++)
        {
            trimmedName = classNames[i].trim();
            list.add(trimmedName);
        }
  
        return newAdded;
}

Tests:

addClass function
var i = 1000; while (i--) { var element = document.getElementById("foo"); element.className = "bar2"; addClass(element, ["bar", "bar2", "bar3"]); }
classList
var i = 1000; while (i--) { var element = document.getElementById("foo"); element.className = "bar2"; var list = element.classList; list.add("bar"); list.add("bar2"); list.add("bar3"); }
classList multiple params
var i = 1000; while (i--) { var element = document.getElementById("foo"); element.className = "bar2"; element.classList.add("bar", "bar2", "bar3"); }
addClass function with classList
var i = 1000; while (i--) { var element = document.getElementById("foo"); element.className = "bar2"; addClass2(element, ["bar", "bar2", "bar3"]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
addClass function
classList
classList multiple params
addClass function with classList

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.

I'd be happy to explain the benchmark and its various aspects.

**What is tested on the provided JSON?**

The benchmark tests the performance of two approaches for adding classes to an HTML element:

1. Using the `addClass` function (which is not part of the standard JavaScript API, but rather a custom implementation).
2. Using the `classList` property of an HTML element.

**Options compared:**

There are three test cases that compare these two approaches:

1. Adding a single class name (`"bar"`).
2. Adding multiple class names (`"bar", "bar2", "bar3"`).

**Pros and Cons of each approach:**

**addClass function:**

* Pros:
	+ This implementation is likely to be faster because it uses native DOM methods (e.g., `setAttribute`) instead of relying on the `classList` property.
	+ It may have better cache locality since it only modifies a single attribute value.
* Cons:
	+ This approach requires custom implementation and may not be as widely supported or optimized by browsers.

**classList:**

* Pros:
	+ This is the standard way to add classes to an HTML element in modern JavaScript.
	+ Browsers are likely to optimize this method for better performance.
	+ It's a more convenient and expressive way to add multiple class names.
* Cons:
	+ This approach may have slower performance compared to the custom `addClass` function due to the additional overhead of parsing the `classList.add()` method.

**Other considerations:**

* The benchmark uses Chrome 86 as the browser, which is relatively recent. Results may vary with older or newer browsers.
* The test cases use a simple HTML structure and element ID ("foo") that is likely cached by the browser. This might affect the performance results.
* The `classList` property is a modern feature introduced in HTML5, so its support may not be universal.

**Library used:**

None of the benchmark definitions explicitly mention any external libraries. However, the custom `addClass` function and `classList` implementation are self-contained and don't require any additional libraries.

**Special JS features or syntax:**

The benchmark uses:

* The `classList` property, which is a modern feature introduced in HTML5.
* The `getAttribute()` and `setAttribute()` methods for modifying attributes, which are part of the standard JavaScript API.

Overall, this benchmark provides valuable insights into the performance differences between two approaches to adding classes to an HTML element.

Related benchmarks:

addFunction vs classList (multiple) (version: 0)

Comparing performance of: addClass function vs classList vs classList multiple params vs addClass function with classList

Created: 5 years ago by: Guest

Jump to the latest result

addClass function

classList

classList multiple params

addClass function with classList

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