Benchmark: className string concat vs classList

HTML Preparation code:

<div id='test'></div>

Script Preparation code:

var el = document.getElementById('test');

Tests:

className string concat
el.className = '1'; el.className = el.className + ' ' + '2';
classList add
el.className = '1'; el.classList.add('2');

Rendered benchmark preparation results:

Previous results

Test case name	Result
className string concat
classList add

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

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Firefox 94 on Windows

Test name	Executions per second
className string concat	1296661.0 Ops/sec
classList add	1087587.0 Ops/sec

className string concat vs classList (version: 0)