Run results for: Replace className.replace vs className.replaceAll vs classList

Run details:

User agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.115 Safari/537.36 OPR/88.0.4412.65

Browser: Opera 88

Operating system: Windows 8.1

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
className.replace	179741.9 Ops/sec
classList	461209.8 Ops/sec
className.replaceAll	160719.9 Ops/sec

HTML Preparation code:

<style>
  .complete1
  {
    color: green;
  }
  
  .complete2
  {
    border: 1px solid red;
  }
</style>

<div id="testDiv" class="test1 test2">Sample div</div>

Tests:

className.replace
var div = document.getElementById('testDiv'); div.className = div.className.replace('test1', 'complete1'); div.className = div.className.replace('test2', 'complete2');
classList
var div = document.getElementById('testDiv'); div.classList.replace('test1', 'complete1'); div.classList.replace('test2', 'complete1');
className.replaceAll
var div = document.getElementById('testDiv'); div.className = div.className.replaceAll('test1', 'complete1'); div.className = div.className.replaceAll('test2', 'complete2');