querySelector vs querySelectorAll vs getElementsByClassName vs querySelector (ID) vs getElementsByID (version: 0)

Comparing performance of: querySelector vs querySelectorAll vs getElementsByClassName vs querySelector (ID) vs getElementsByID

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

Historical Performance Data aggregated from 284 community runs

Desktop Results:
Chrome 187 runs
getElementsByClassName
11.1M/s
getElementsByID
9.8M/s
querySelector
8.5M/s
querySelector (ID)
5.5M/s
querySelectorAll
3.5M/s

Fastest: getElementsByClassName (3.2x faster)

View exact numbers
  • ✓ getElementsByClassName: 11,074,884 ops/sec
  • • getElementsByID: 9,773,872 ops/sec
  • • querySelector: 8,459,029 ops/sec
  • • querySelector (ID): 5,502,022 ops/sec
  • • querySelectorAll: 3,494,044 ops/sec
Firefox 58 runs
getElementsByID
8.4M/s
getElementsByClassName
8.1M/s
querySelector (ID)
4.3M/s
querySelector
4.1M/s
querySelectorAll
2.0M/s

Fastest: getElementsByID (4.1x faster)

View exact numbers
  • ✓ getElementsByID: 8,361,540 ops/sec
  • • getElementsByClassName: 8,123,511 ops/sec
  • • querySelector (ID): 4,335,288 ops/sec
  • • querySelector: 4,140,863 ops/sec
  • • querySelectorAll: 2,028,587 ops/sec
Safari 14 runs
getElementsByID
23.6M/s
getElementsByClassName
19.4M/s
querySelectorAll
12.0M/s
querySelector
7.2M/s
querySelector (ID)
6.4M/s

Fastest: getElementsByID (3.7x faster)

View exact numbers
  • ✓ getElementsByID: 23,580,846 ops/sec
  • • getElementsByClassName: 19,389,758 ops/sec
  • • querySelectorAll: 11,987,304 ops/sec
  • • querySelector: 7,150,765 ops/sec
  • • querySelector (ID): 6,401,387 ops/sec
Other 6 runs
getElementsByClassName
6.7M/s
getElementsByID
5.9M/s
querySelector
5.8M/s
querySelector (ID)
3.6M/s
querySelectorAll
2.0M/s

Fastest: getElementsByClassName (3.4x faster)

View exact numbers
  • ✓ getElementsByClassName: 6,719,566 ops/sec
  • • getElementsByID: 5,928,973 ops/sec
  • • querySelector: 5,766,233 ops/sec
  • • querySelector (ID): 3,574,625 ops/sec
  • • querySelectorAll: 1,957,241 ops/sec
Mobile Results:
Chrome 13 runs
getElementsByClassName
4.2M/s
getElementsByID
3.8M/s
querySelector
3.5M/s
querySelector (ID)
2.8M/s
querySelectorAll
1.7M/s

Fastest: getElementsByClassName (2.5x faster)

View exact numbers
  • ✓ getElementsByClassName: 4,184,386 ops/sec
  • • getElementsByID: 3,753,038 ops/sec
  • • querySelector: 3,537,101 ops/sec
  • • querySelector (ID): 2,773,986 ops/sec
  • • querySelectorAll: 1,652,528 ops/sec
Safari 6 runs
getElementsByID
37.8M/s
getElementsByClassName
26.0M/s
querySelectorAll
10.1M/s
querySelector
6.5M/s
querySelector (ID)
4.8M/s

Fastest: getElementsByID (7.8x faster)

View exact numbers
  • ✓ getElementsByID: 37,771,528 ops/sec
  • • getElementsByClassName: 25,993,644 ops/sec
  • • querySelectorAll: 10,093,084 ops/sec
  • • querySelector: 6,545,539 ops/sec
  • • querySelector (ID): 4,823,320 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
    querySelector
    querySelectorAll
    getElementsByClassName
    querySelector (ID)
    getElementsByID

    Fastest: N/A

    Slowest: N/A

Latest run results:
Run details: (Test run date: one month ago)
Mozilla/5.0 (Android 16; Mobile; rv:152.0) Gecko/152.0 Firefox/152.0
Firefox Mobile 152 on Android
View result in a separate tab
getElementsByClassName
7.5M/s
getElementsByID
7.5M/s
querySelector
5.0M/s
querySelector (ID)
5.0M/s
querySelectorAll
2.2M/s
View exact numbers
Test name Executions per second
✓ getElementsByClassName 7,508,665 Ops/sec
getElementsByID 7,453,066 Ops/sec
querySelector 5,039,432 Ops/sec
querySelector (ID) 4,951,413 Ops/sec
querySelectorAll 2,171,270 Ops/sec
LLMs can make mistakes. Check important info.

Related benchmarks