Run results for: Cash vs Vanilla JS GetID Speed Test2

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

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

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;