Run results for: querySelector VS querySelectorAll VS getElementsByClassName VS getElementsByID

Try to get the order of magnitude of the difference in a simple case.

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:123.0) Gecko/20100101 Firefox/123.0
Firefox 123
Mac OS X 10.15
Desktop
2 years ago
Test name Executions per second
querySelector (className) 2981195.0 Ops/sec
querySelectorAll (className) 1301309.2 Ops/sec
getElementsByClassName 5571702.0 Ops/sec
querySelector (elemID) 2881979.5 Ops/sec
querySelectorAll (elemID) 1094596.8 Ops/sec
getElementsByID 5713953.5 Ops/sec
HTML Preparation code:
Tests:

  • querySelector (className)

  • querySelectorAll (className)

  • getElementsByClassName

  • querySelector (elemID)

  • querySelectorAll (elemID)

  • getElementsByID