Benchmark: addClass/removeClass

addClass/removeClass (version: 9)

classList.add/classList.remove vs function addClass/function removeClass vs jQuery (one and multi class)

Comparing performance of: classList.add/classList.remove (1 class) vs function addClass/function removeClass (1 class) vs jQuery (1 class) vs classList.add/classList.remove (2 class) vs function addClass/function removeClass (2 class) vs jQuery (2 class)

Created: 9 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<div id="testElement">Test</div>

Script Preparation code:

var API = API || {};
API.classReg=function(className){return new RegExp("(^|\\s+)"+className+"(\\s+|$)");};

if('classList' in document.documentElement){
	API.hasClass=function(elem,c){return elem.classList.contains(c);};
  	API.addClass=function(elem,c){
		var cArr=c.match(/[a-z][a-z0-9_-]*/gi);
		elem.classList.add.apply(elem.classList, cArr);
    };
    API.removeClass=function(elem,c){
		var cArr=c.match(/[a-z][a-z0-9_-]*/gi);
		elem.classList.remove.apply(elem.classList, cArr);
    };
}else{
	API.hasClass=function(elem,c){return API.classReg(c).test(elem.className);};
  	API.addClass=function(elem,c){
		var cList=c.split(/\s+/);
		if(!API.hasClass(elem,cList[0])){
			if(elem.className != '') cList[0]=' '+cList[0];
			elem.className=elem.className+cList[0];
		}
		if(cList.length > 1) API.addClass(elem,cList.slice(1).join(' '));
    };
    API.removeClass=function(elem,c){
		var cList=c.split(/\s+/);
		if(API.hasClass(elem,cList[0])) elem.className=elem.className.replace(API.classReg(cList[0]),' ');
		if(cList.length > 1) API.removeClass(elem,cList.slice(1).join(' '));
    };
}

var elem = document.getElementById('testElement');

Tests:

classList.add/classList.remove (1 class)
elem.classList.add('classtest'); elem.classList.remove('classtest');
function addClass/function removeClass (1 class)
API.addClass(elem,'classtest'); API.removeClass(elem,'classtest');
jQuery (1 class)
$('#testElement').addClass('classtest'); $('#testElement').removeClass('classtest');
classList.add/classList.remove (2 class)
elem.classList.add('classtest','twoclass'); elem.classList.remove('classtest','twoclass');
function addClass/function removeClass (2 class)
API.addClass(elem,'classtest twoclass'); API.removeClass(elem,'classtest twoclass');
jQuery (2 class)
$('#testElement').addClass('classtest twoclass'); $('#testElement').removeClass('classtest twoclass');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classList.add/classList.remove (1 class)
function addClass/function removeClass (1 class)
jQuery (1 class)
classList.add/classList.remove (2 class)
function addClass/function removeClass (2 class)
jQuery (2 class)

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 benchmark and explain what's being tested, compared, and their pros and cons.

**What is being tested?**

The benchmark tests three different approaches to add and remove classes from an HTML element:

1. `classList.add`/`classList.remove`: This method uses the `classList` API provided by modern browsers.
2. Custom function `addClass`/`removeClass`: This approach defines two custom functions, `addClass` and `removeClass`, which use regular expressions to match class names.
3. jQuery: This method uses the jQuery library to add and remove classes.

**Comparison of approaches**

Here's a brief summary of each approach:

1. **`classList.add`/`classList.remove`**: This is the most modern and efficient way to work with classes in HTML elements. It uses the `classList` API, which is supported by most browsers.
	* Pros: Fast, efficient, and widely supported.
	* Cons: Requires a modern browser that supports the `classList` API.
2. **Custom function `addClass`/`removeClass`**: This approach defines two custom functions that use regular expressions to match class names.
	* Pros: Works in older browsers that don't support the `classList` API, and can be optimized for performance.
	* Cons: Uses regular expressions, which can be slower than native methods. Requires more code and maintenance.
3. **jQuery**: This method uses the jQuery library to add and remove classes.
	* Pros: Works in older browsers, easy to use, and well-maintained.
	* Cons: Adds an extra dependency (jQuery), can be slower than native methods.

**Other considerations**

When choosing between these approaches, consider the following factors:

* **Browser support**: If you need to support older browsers, you may want to opt for jQuery or custom functions. If you're targeting modern browsers, `classList.add`/`classList.remove` is a good choice.
* **Performance**: If speed is critical, `classList.add`/`classList.remove` and custom functions may be more efficient than jQuery.
* **Code complexity**: Custom functions require more code and maintenance than native methods or jQuery.

**Library**

In this benchmark, the library used is jQuery. It provides a convenient way to add and remove classes from HTML elements, but adds an extra dependency.

**Special JS feature/syntax**

This benchmark doesn't use any special JavaScript features or syntax beyond what's available in modern browsers.

Related benchmarks: