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

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days 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.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 5.1; rv:52.0) Gecko/20100101 Firefox/52.0

Browser/OS: Firefox 52 on Windows XP

View result in a separate tab

Test name	Executions per second
classList.add/classList.remove (1 class)	41183.4 Ops/sec
function addClass/function removeClass (1 class)	25147.6 Ops/sec
jQuery (1 class)	15699.0 Ops/sec
classList.add/classList.remove (2 class)	27093.3 Ops/sec
function addClass/function removeClass (2 class)	17638.9 Ops/sec
jQuery (2 class)	12290.2 Ops/sec

Related benchmarks:

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: 7 years ago by: Registered User

Jump to the latest 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)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):