Test name | Executions per second |
---|---|
getElementById() | 3965512.8 Ops/sec |
getElementsByClassName() | 3015661.0 Ops/sec |
getElementsByTagName() | 2963055.2 Ops/sec |
querySelector(#id) | 2185863.8 Ops/sec |
querySelector(.id) | 2918715.0 Ops/sec |
querySelectorAll(#id) | 955129.3 Ops/sec |
querySelectorAll(.id) | 1228195.6 Ops/sec |
jQuery(#id) | 992373.8 Ops/sec |
jQuery(.id) | 597203.2 Ops/sec |
jQuery(tag#id) | 432423.0 Ops/sec |
jQuery(tag.id) | 477408.8 Ops/sec |
jQuery + getElementById | 1412367.9 Ops/sec |
jQuery + getElementsByClassName | 389599.6 Ops/sec |
jQuery + querySelectorAll | 382290.7 Ops/sec |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="foo" class="foo2"></div>
var el = document.getElementById('foo');
var className = el.className;
var el = document.getElementsByClassName('foo2')[0];
var className = el.className;
var el = document.getElementsByTagName('div')[0];
var className = el.className;
var el = document.querySelector('#foo');
var className = el.className;
var el = document.querySelector('.foo2');
var className = el.className;
var el = document.querySelectorAll('#foo')[0];
var className = el.className;
var el = document.querySelectorAll('.foo2')[0];
var className = el.className;
var el = $('#foo')[0];
var className = el.className;
var el = $('.foo2')[0];
var className = el.className;
var el = $('div#foo')[0];
var className = el.className;
var el = $('div.foo2')[0];
var className = el.className;
var el = $(document.getElementById('foo'))[0];
var className = el.className;
var el = $(document.getElementsByClassName('foo2'))[0];
var className = el.className;
var el = $(document.querySelectorAll('.foo2'))[0];
var className = el.className;