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

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

Browser: Firefox 66

Operating system: Windows

Device Platform: Desktop

Date tested: 5 years ago

Test name	Executions per second
className.indexOf before remove	4665134.5 Ops/sec
classList.contains before remove	991314.6 Ops/sec
classList.remove without checking	1255833.1 Ops/sec
className splice	2001613.4 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);