Benchmark: addFunction vs classList (multiple)

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

​x
 
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"]);
}

 
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");
}

 
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"); }
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"]); }
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

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
classList multiple params
addClass function with 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; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36 Edg/86.0.622.51

Browser/OS: Chrome 86 on Windows

View result in a separate tab

Test name	Executions per second
addClass function	275.9 Ops/sec
classList	278.6 Ops/sec
classList multiple params	458.3 Ops/sec
addClass function with classList	255.3 Ops/sec

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

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:

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

Options compared:

There are three test cases that compare these two approaches:

Adding a single class name ("bar").
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.

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: 4 years ago by: Guest

Jump to the latest result