Benchmark: delete 2 - MeasureThat.net

HTML Preparation code:

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

Script Preparation code:

var API = API || {};
API.classReg=function(className){return new RegExp("(^|\\s+)"+className+"(\\s+|$)");};

API.hasClass=function(o,c){return o.classList.contains(c);};
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);
};

API.hasClassS=function(o,c){return API.classReg(c).test(o.className);};
API.addClassS=function(o,c){
	var cList=c.split(' ');
	if(!API.hasClassS(o,cList[0])){
		if(o.className != '') cList[0]=' '+cList[0];
		o.className=o.className+cList[0];
	}
	if(cList.length > 1) API.addClassS(o,cList.slice(1).join(' '));
};
API.removeClassS=function(o,c){
	var cList=c.split(' ');
	if(API.hasClassS(o,cList[0])) o.className=o.className.replace(API.classReg(cList[0]),' ');
	if(cList.length > 1) API.removeClassS(o,cList.slice(1).join(' '));
};

API.hasClassSN=function(o,c){return API.classReg(c).test(o.className);};
API.addClassSN=function(o,c){
	var s='',cArr=c.match(/[a-z][a-z0-9_-]*/gi);
	for(var i=0,len=cArr.length;i<len;i++){
		if(!API.hasClassSN(o,cArr[i])){s+=' '+cArr[i];}
	}
	if(o.className=='') s=s.slice(1);
	o.className=o.className+s;
};
API.removeClassSN=function(o,c){
	var cArr=c.match(/[a-z][a-z0-9_-]*/gi);
	for(var i=0,len=cArr.length;i<len;i++){
		if(API.hasClassSN(o,cArr[i])) o.className=o.className.replace(API.classReg(cArr[i]),' ');
	}
};

var elem = document.getElementById('testElement');

Tests:

classList.add/classList.remove
elem.classList.add('classtest','twoclass');
function addClass/function removeClass
API.addClass(elem,'classtest twoclass');
function addClass/function removeClass S
API.addClassS(elem,'classtest twoclass');
function addClass/function removeClass S N
API.addClassSN(elem,'classtest twoclass');
jQuery
$('#testElement').addClass('classtest twoclass');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
classList.add/classList.remove
function addClass/function removeClass
function addClass/function removeClass S
function addClass/function removeClass S N
jQuery

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.

Measuring JavaScript performance is crucial for optimizing code and improving user experience.

**Benchmark Explanation**

The provided JSON represents a set of benchmark test cases for measuring the performance of different methods to manipulate CSS classes in JavaScript. The test cases are designed to compare various approaches, including:

1. Native `classList` API (e.g., `elem.classList.add('classtest','twoclass')`)
2. Custom `addClass` and `removeClass` functions (e.g., `API.addClass(elem,'classtest twoclass')`)
3. `addClassS` and `removeClassS` functions, which use regular expressions to manipulate class names
4. jQuery's `addClass` method (e.g., `$('#testElement').addClass('classtest twoclass')`)

**Options Compared**

Each test case compares the performance of two methods:

* The first method is a native JavaScript approach (e.g., using the `classList` API)
* The second method is either a custom function or jQuery's `addClass` method

The comparison aims to determine which method is faster and more efficient for manipulating CSS classes in different scenarios.

**Pros and Cons of Different Approaches**

Here are some pros and cons of each approach:

1. Native `classList` API:
	* Pros: Fast, native implementation, accurate results
	* Cons: May not work in older browsers or with certain CSS rules
2. Custom `addClass` and `removeClass` functions:
	* Pros: Can be optimized for specific use cases, may provide more control
	* Cons: May be slower than native API, requires more code to implement correctly
3. `addClassS` and `removeClassS` functions:
	* Pros: Can handle multiple classes, may be faster due to regex optimization
	* Cons: Uses regular expressions, which can be slower in some cases
4. jQuery's `addClass` method:
	* Pros: Fast, widely supported, easy to use
	* Cons: May not work in older browsers or with certain CSS rules

**Other Considerations**

When measuring JavaScript performance, it's essential to consider factors such as:

* Browser support and version compatibility
* CSS rule complexity and specificity
* Number of classes being manipulated
* Code optimization techniques (e.g., caching, memoization)

**Alternatives**

If you're looking for alternative methods or libraries for manipulating CSS classes in JavaScript, here are a few options:

1. VanillaJS: A lightweight, fast JavaScript library for DOM manipulation.
2. jQuery: A popular JavaScript library for DOM manipulation and event handling.
3. Embla CSS: A CSS-only solution for manipulating class names and styles.

Keep in mind that the choice of method or library depends on your specific use case, performance requirements, and personal preference.

Related benchmarks:

delete 2 (version: 8)

delete 2

Comparing performance of: classList.add/classList.remove vs function addClass/function removeClass vs function addClass/function removeClass S vs function addClass/function removeClass S N vs jQuery

Created: 9 years ago by: Registered User

Jump to the latest result

classList.add/classList.remove

function addClass/function removeClass

function addClass/function removeClass S

function addClass/function removeClass S N

jQuery

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):