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

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36

Browser: Chrome 73

Operating system: Windows

Device Platform: Desktop

Date tested: 5 years ago

Test name	Executions per second
className.indexOf before remove	2389261.8 Ops/sec
classList.contains before remove	706825.8 Ops/sec
classList.remove without checking	850181.9 Ops/sec
className splice	830191.6 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);