Benchmark: Replace className.replace vs className.replaceAll vs classList

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
className.replace
classList
className.replaceAll

Fastest: N/A

Slowest: N/A

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

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

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/OS: Opera 88 on Windows 8.1

View result in a separate tab

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

Replace className.replace vs className.replaceAll vs classList (version: 0)

Comparing performance of: className.replace vs classList vs className.replaceAll

Created: one year ago by: Guest

Jump to the latest result

className.replace

classList

className.replaceAll

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A