Run results for: className vs. classList - MeasureThat.net

Run details:

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

Browser: Chrome 63

Operating system: Windows 8.1

Device Platform: Other

Date tested: 2025 years ago

Test name	Executions per second
className =	794140.9 Ops/sec
className +=	1270.3 Ops/sec
classList	354142.7 Ops/sec
addClass	78957.6 Ops/sec

Website performance monitoring

Script Preparation code:

var element = document.createElement('div');
$element = $(element);

Tests:

className =
element.className = ''; element.className = 'bar';
className +=
element.className = ''; element.className += ' bar';
classList
element.className = ''; element.classList.add('bar');
addClass
element.className = ''; $element.addClass('bar');