Run results for: document.getElementById vs jQuery

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/58.0.3029.81 Chrome/58.0.3029.81 Safari/537.36

Browser: Chromium 58

Operating system: Ubuntu

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
jquery	0.2 Ops/sec
vanilla js document.getElementById	0.4 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