Run results for: classList.remove vs. className.indexOf then remove

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Browser: Chrome 110

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
className.indexOf before remove	3255843.0 Ops/sec
classList.contains before remove	911351.8 Ops/sec
classList.remove without checking	1071766.4 Ops/sec
className splice	1227545.0 Ops/sec

HTML Preparation code:

<div id="foo" class="bar"></div>
<div id="blarg" class="baz"></div>

Script Preparation code:

var test_element_has = document.getElementById("foo");
var test_element_hasnt = document.getElementById("blarg");

Tests:

className.indexOf before remove
function remove(elem) { if( elem.className.indexOf('bar') != -1 ) elem.classList.remove('bar'); } remove(test_element_has); remove(test_element_hasnt);
classList.contains before remove
function remove(elem) { if( elem.classList.contains('bar') != -1 ) elem.classList.remove('bar'); } remove(test_element_has); remove(test_element_hasnt);
classList.remove without checking
function remove(elem) { elem.classList.remove('bar'); } remove(test_element_has); remove(test_element_hasnt);
className splice
function remove(elem) { elem.className = elem.className.replace('bar',''); } remove(test_element_has); remove(test_element_hasnt);