Benchmark: delete - MeasureThat.net

delete (version: 4)

delete

Comparing performance of: classList.add/classList.remove (2 class) vs function addClass/function removeClass (2 class) vs function addClass/function removeClass 1 (2 class) vs jQuery (2 class) vs classList.add/classList.remove (1 class) vs function addClass/function removeClass (1 class) vs function addClass/function removeClass 1 (1 class) vs jQuery (1 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.addClass=function(o,c){
		var cArr=c.match(/[a-z][a-z0-9_-]*/gi);
		o.classList.add.apply(o.classList,cArr);
	};
	API.removeClass=function(o,c){
		var cArr=c.match(/[a-z][a-z0-9_-]*/gi);
		o.classList.remove.apply(o.classList,cArr);
	};
}

if('classList' in document.documentElement){
	API.addClass1=function(o,c){
		var cArr=c.match(/[a-z][a-z0-9_-]*/gi);
		if(cArr.length==1){o.classList.add(cArr[0]);}else{o.classList.add.apply(o.classList,cArr);}
	};
	API.removeClass1=function(o,c){
		var cArr=c.match(/[a-z][a-z0-9_-]*/gi);
		if(cArr.length==1){o.classList.remove(cArr[0]);}else{o.classList.remove.apply(o.classList,cArr);}
	};
}

var elem = document.getElementById('testElement');

Tests:

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');
function addClass/function removeClass 1 (2 class)
API.addClass1(elem,'classtest twoclass'); API.removeClass1(elem,'classtest twoclass');
jQuery (2 class)
$('#testElement').addClass('classtest twoclass'); $('#testElement').removeClass('classtest twoclass');
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');
function addClass/function removeClass 1 (1 class)
API.addClass1(elem,'classtest'); API.removeClass1(elem,'classtest');
jQuery (1 class)
$('#testElement').addClass('classtest'); $('#testElement').removeClass('classtest');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classList.add/classList.remove (2 class)
function addClass/function removeClass (2 class)
function addClass/function removeClass 1 (2 class)
jQuery (2 class)
classList.add/classList.remove (1 class)
function addClass/function removeClass (1 class)
function addClass/function removeClass 1 (1 class)
jQuery (1 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 dive into the world of JavaScript microbenchmarks on MeasureThat.net!

**Benchmark Definition**

The benchmark is designed to test the performance of different ways to add and remove classes from an HTML element. The script preparation code sets up a custom `API` object with methods for adding and removing classes, as well as a special method `classList`. The html preparation code creates an HTML element with the id "testElement".

**Options Compared**

The benchmark compares six different options:

1. **Native `classList.add()` and `classList.remove()`**: These methods are part of the Web APIs and allow for adding and removing classes from an element.
2. **Custom `API.addClass()` and `API.removeClass()`**: These methods are defined in the script preparation code and provide a custom implementation for adding and removing classes.
3. **Custom `API.addClass1()` and `API.removeClass1()`**: These methods are similar to the previous two, but they have an additional check for single-class names.
4. **jQuery `.addClass()` and `.removeClass()`**: These methods are part of the jQuery library and provide a convenient way to manipulate classes on elements.
5. **Native `$().addClass()` and `$().removeClass()`**: These methods are part of the jQuery library and allow for adding and removing classes from an element using jQuery selectors.

**Pros and Cons**

Here's a brief summary of each option:

1. **Native `classList.add()` and `classList.remove()`**:
	* Pros: Fast, lightweight, and widely supported.
	* Cons: Limited control over class names.
2. **Custom `API.addClass()` and `API.removeClass()`**:
	* Pros: Customizable, but may be slower due to the overhead of the custom implementation.
	* Cons: Requires custom script implementation.
3. **Custom `API.addClass1()` and `API.removeClass1()`**:
	* Pros: Provides additional checks for single-class names, which can improve performance in some cases.
	* Cons: Similar to the previous option, with an added layer of complexity.
4. **jQuery `.addClass()` and `.removeClass()`**:
	* Pros: Convenient, widely supported, and provides a lot of functionality out-of-the-box.
	* Cons: Adds extra overhead due to the jQuery library.
5. **Native `$().addClass()` and `$().removeClass()`**:
	* Pros: Fast, lightweight, and convenient.
	* Cons: Requires jQuery library inclusion.

**Benchmark Results**

The benchmark results show that the native `classList.add()` and `classList.remove()` methods are generally the fastest, followed closely by the native `$().addClass()` and `$().removeClass()` methods. The custom implementations from the script preparation code are slower, but still provide useful performance characteristics. The jQuery implementation is slower due to the added overhead.

Overall, the benchmark results suggest that for most use cases, using native `classList.add()` and `classList.remove()` or native `$().addClass()` and `$().removeClass()` methods provides the best performance. However, custom implementations can be useful in specific situations where additional control over class names is required.

Related benchmarks: