Benchmark: addFunction vs classList

HTML Preparation code:

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

AخA
 
<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 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;}

Tests:

addClass function
var element = document.getElementById("foo"); var i = 1000; while (i--) { addClass(element, "bar"); }
var element = document.getElementById("foo");
var i = 1000;
while (i--) {
addClass(element, "bar");
}

classList

var element = document.getElementById("foo");
var i = 1000;
while (i--) {
	element.classList.add("bar");
}

 
var element = document.getElementById("foo");var i = 1000;while (i--) {    element.classList.add("bar");}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
addClass function
classList

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko

Browser/OS: IE 11 on Windows

View result in a separate tab

Test name	Executions per second
addClass function	426.4 Ops/sec
classList	2794.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 7 months ago):

Benchmark Analysis

The provided benchmark measures the performance of two approaches to add classes to an HTML element: using a custom addClass function and using the classList.add() method.

Custom addClass Function

The custom addClass function is used in the first test case. This approach is implemented as a self-contained JavaScript function that takes an element and an array of class names as arguments. The function iterates through the class names, checks if each name is not empty, and adds it to the element's class attribute if it's not already present.

Pros:

Flexibility: This approach allows developers to define their own implementation of adding classes to an element.
Control: The developer has full control over the logic and can optimize it for specific use cases.

Cons:

Complexity: The function is relatively complex, which can lead to increased runtime overhead.
Overhead: Creating a new function call and executing its body may introduce unnecessary overhead.

classList.add() Method

The classList.add() method is used in the second test case. This approach is part of the Web APIs, specifically the DOM API, and provides a simple way to add classes to an element.

Pros:

Efficiency: The classList.add() method is implemented as a direct call to the browser's internal logic, minimizing overhead.
Convenience: It's a standard API that many developers are familiar with.

Cons:

Vendor Lock-in: Some older browsers may not support this method or may have different behavior.
Limited Control: The developer has limited control over the implementation and optimization of this method.

Other Considerations

Browser Support: Both approaches work in modern browsers, but the classList.add() method is more widely supported due to its standardization in Web APIs.
Optimization Opportunities: Developers can optimize the custom addClass function by using techniques like caching or memoization to reduce runtime overhead.

Alternative Approaches

Using an existing library: Libraries like jQuery or Lodash provide optimized implementations of adding classes to elements, which might be worth considering for complex use cases.
Direct DOM manipulation: Some developers might prefer direct manipulation of the element's class attribute using string concatenation or other techniques.

In summary, the choice between the custom addClass function and the classList.add() method depends on the specific requirements and constraints of the project. The classList.add() method is generally a more efficient and convenient option, but the custom function provides flexibility and control.

LLMs can make mistakes. Check important info.

**Benchmark Analysis**

The provided benchmark measures the performance of two approaches to add classes to an HTML element: using a custom `addClass` function and using the `classList.add()` method.

**Custom `addClass` Function**

The custom `addClass` function is used in the first test case. This approach is implemented as a self-contained JavaScript function that takes an element and an array of class names as arguments. The function iterates through the class names, checks if each name is not empty, and adds it to the element's `class` attribute if it's not already present.

**Pros:**

1. **Flexibility**: This approach allows developers to define their own implementation of adding classes to an element.
2. **Control**: The developer has full control over the logic and can optimize it for specific use cases.

**Cons:**

1. **Complexity**: The function is relatively complex, which can lead to increased runtime overhead.
2. **Overhead**: Creating a new function call and executing its body may introduce unnecessary overhead.

**classList.add() Method**

The `classList.add()` method is used in the second test case. This approach is part of the Web APIs, specifically the DOM API, and provides a simple way to add classes to an element.

**Pros:**

1. **Efficiency**: The `classList.add()` method is implemented as a direct call to the browser's internal logic, minimizing overhead.
2. **Convenience**: It's a standard API that many developers are familiar with.

**Cons:**

1. **Vendor Lock-in**: Some older browsers may not support this method or may have different behavior.
2. **Limited Control**: The developer has limited control over the implementation and optimization of this method.

**Other Considerations**

* **Browser Support**: Both approaches work in modern browsers, but the `classList.add()` method is more widely supported due to its standardization in Web APIs.
* **Optimization Opportunities**: Developers can optimize the custom `addClass` function by using techniques like caching or memoization to reduce runtime overhead.

**Alternative Approaches**

1. **Using an existing library**: Libraries like jQuery or Lodash provide optimized implementations of adding classes to elements, which might be worth considering for complex use cases.
2. **Direct DOM manipulation**: Some developers might prefer direct manipulation of the element's `class` attribute using string concatenation or other techniques.

In summary, the choice between the custom `addClass` function and the `classList.add()` method depends on the specific requirements and constraints of the project. The `classList.add()` method is generally a more efficient and convenient option, but the custom function provides flexibility and control.

Related benchmarks:

addFunction vs classList (version: 0)

Comparing performance of: addClass function vs classList

Created: 4 years ago by: Guest

Jump to the latest result

addClass function