setAttribute(...) vs. classList.add(...) vs classList.value vs className (version: 0) Benchmark.js

Comparing performance of: setAttribute(...) vs classList.add(...) vs classList.value vs ClassName

Created: 4 years ago by: Guest
Go to the latest result
HTML Preparation code:
Tests:

Historical Performance Data aggregated from 20 community runs

Desktop Results:
Chrome 13 runs
ClassName
221K/s
classList.value
152K/s
setAttribute(...)
108K/s
classList.add(...)
56K/s

Fastest: ClassName (3.9x faster)

View exact numbers
  • ✓ ClassName: 220,848 ops/sec
  • • classList.value: 152,183 ops/sec
  • • setAttribute(...): 108,445 ops/sec
  • • classList.add(...): 56,190 ops/sec
Firefox 7 runs
ClassName
146K/s
classList.value
99K/s
setAttribute(...)
83K/s
classList.add(...)
48K/s

Fastest: ClassName (3.1x faster)

View exact numbers
  • ✓ ClassName: 146,019 ops/sec
  • • classList.value: 98,524 ops/sec
  • • setAttribute(...): 82,555 ops/sec
  • • classList.add(...): 47,594 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results
  • Test case name Result
    setAttribute(...)
    classList.add(...)
    classList.value
    ClassName

    Fastest: N/A

    Slowest: N/A

Latest run results:
Run details: (Test run date: 9 months ago)
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36
Chrome 143 on Windows
View result in a separate tab
ClassName
160K/s
classList.value
126K/s
setAttribute(...)
96K/s
classList.add(...)
48K/s
View exact numbers
Test name Executions per second
✓ ClassName 160,340 Ops/sec
classList.value 126,005 Ops/sec
setAttribute(...) 95,550 Ops/sec
classList.add(...) 48,032 Ops/sec

Related benchmarks