Benchmark: Cash vs Vanilla JS GetID Speed Test2

Cash vs Vanilla JS GetID Speed Test2 (version: 0)

Comparing speed of getting element by id with jQuery vs Vanilla JS

Comparing performance of: `getElementById() vs getElementsByClassName() vs getElementsByTagName() vs querySelector(#id) vs querySelector(.id) vs querySelectorAll(#id) vs querySelectorAll(.id) vs jQuery(#id) vs jQuery(.id) vs jQuery(tag#id) vs jQuery(tag.id) vs jQuery + getElementById vs jQuery + getElementsByClassName vs jQuery + querySelectorAll vs querySelectorAll in function`

Created: 6 years ago by: Guest

Go to the latest result

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/cash/6.0.1/cash.min.js"></script>
<div id="foo" class="foo2"></div>

Tests:

getElementById()
var el = document.getElementById('foo'); var className = el.className;
getElementsByClassName()
var el = document.getElementsByClassName('foo2')[0]; var className = el.className;
getElementsByTagName()
var el = document.getElementsByTagName('div')[0]; var className = el.className;
querySelector(#id)
var el = document.querySelector('#foo'); var className = el.className;
querySelector(.id)
var el = document.querySelector('.foo2'); var className = el.className;
querySelectorAll(#id)
var el = document.querySelectorAll('#foo')[0]; var className = el.className;
querySelectorAll(.id)
var el = document.querySelectorAll('.foo2')[0]; var className = el.className;
jQuery(#id)
var el = $('#foo')[0]; var className = el.className;
jQuery(.id)
var el = $('.foo2')[0]; var className = el.className;
jQuery(tag#id)
var el = $('div#foo')[0]; var className = el.className;
jQuery(tag.id)
var el = $('div.foo2')[0]; var className = el.className;
jQuery + getElementById
var el = $(document.getElementById('foo'))[0]; var className = el.className;
jQuery + getElementsByClassName
var el = $(document.getElementsByClassName('foo2'))[0]; var className = el.className;
jQuery + querySelectorAll
var el = $(document.querySelectorAll('.foo2'))[0]; var className = el.className;
querySelectorAll in function
var el = (function(selector){return document.querySelectorAll(selector);})('.foo2'); var className = el[0].className;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById()
getElementsByClassName()
getElementsByTagName()
querySelector(#id)
querySelector(.id)
querySelectorAll(#id)
querySelectorAll(.id)
jQuery(#id)
jQuery(.id)
jQuery(tag#id)
jQuery(tag.id)
jQuery + getElementById
jQuery + getElementsByClassName
jQuery + querySelectorAll
querySelectorAll in function

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

getElementById()

12.5M/s

getElementsByClassName()

10.5M/s

getElementsByTagName()

10.5M/s

querySelectorAll(.id)

7.2M/s

querySelectorAll in function

7.0M/s

jQuery(#id)

6.7M/s

querySelector(.id)

5.8M/s

jQuery + getElementById

5.6M/s

querySelector(#id)

5.6M/s

jQuery + getElementsByClassName

4.7M/s

jQuery(.id)

4.7M/s

jQuery + querySelectorAll

4.0M/s

querySelectorAll(#id)

3.6M/s

jQuery(tag.id)

2.9M/s

jQuery(tag#id)

2.8M/s

View exact numbers

Test name	Executions per second
✓ getElementById()	12,466,793 Ops/sec
getElementsByClassName()	10,529,344 Ops/sec
getElementsByTagName()	10,486,617 Ops/sec
querySelectorAll(.id)	7,159,834 Ops/sec
querySelectorAll in function	7,030,800 Ops/sec
jQuery(#id)	6,717,068 Ops/sec
querySelector(.id)	5,782,626 Ops/sec
jQuery + getElementById	5,638,868 Ops/sec
querySelector(#id)	5,575,180 Ops/sec
jQuery + getElementsByClassName	4,731,742 Ops/sec
jQuery(.id)	4,713,058 Ops/sec
jQuery + querySelectorAll	3,974,278 Ops/sec
querySelectorAll(#id)	3,628,498 Ops/sec
jQuery(tag.id)	2,855,967 Ops/sec
jQuery(tag#id)	2,842,685 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.