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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

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	230932.1 Ops/sec
function addClass/function removeClass	106210.1 Ops/sec
function addClass/function removeClass S	22462.7 Ops/sec
function addClass/function removeClass S N	29434.9 Ops/sec
jQuery	47930.3 Ops/sec

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

Experimental features:

Fastest: N/A

Slowest: N/A