Run results for: document.getElementById vs jQuery

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:59.0) Gecko/20100101 Firefox/59.0

Browser: Firefox 59

Operating system: Linux

Device Platform: Other

Date tested: 6 years ago

Test name	Executions per second
jquery	1.0 Ops/sec
vanilla js document.getElementById	3.0 Ops/sec

HTML Preparation code:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>

Script Preparation code:

var input = null;
for (var i = 0; i < 20; i++) {
  var input = document.createElement('input');
  input.id = 'test' + i;
  document.body.appendChild(input);
}

Tests:

jquery
var start = new Date(); for (var loop = 0; loop < 100000; loop++) for (var i = 0; i < 20; i++) { $('#test' + i); } var stop = new Date(); console.log(stop - start);
vanilla js document.getElementById
var start = new Date(); for (var loop = 0; loop < 100000; loop++) for (var i = 0; i < 20; i++) { document.getElementById('test' + i); } var stop = new Date(); console.log(stop - start);

Run results for: document.getElementById vs jQuery

jquery

vanilla js document.getElementById