Benchmark: classList.remove vs. className.indexOf then remove

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);

Rendered benchmark preparation results:

Previous results

Test case name	Result
className.indexOf before remove
classList.contains before remove
classList.remove without checking
className splice

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

Latest run results:

Run details: (Test run date: 9 months ago)

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

Browser/OS: Chrome 115 on Windows

Test name	Executions per second
className.indexOf before remove	4121887.0 Ops/sec
classList.contains before remove	1122350.0 Ops/sec
classList.remove without checking	1245389.0 Ops/sec
className splice	1974463.0 Ops/sec

classList.remove vs. className.indexOf then remove (version: 0)