document.getElementById VS Jquery $('#') JQuery 2 (v35)

Revision 35 of this benchmark created by RT on

Description

Comparison for $('#id') VS document.getElementById('id');

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<p id="foo">
  <span class="test">Test</span>
</p>

Setup

window.nativeFoo = document.getElementById('foo');
    window.$foo = $('#foo');
    window.$nativeFoo = $(document.getElementById('foo'));

Test runner

Ready to run.

Testing in
TestOps/sec
document.getElementById('id')
var foo = document.getElementById('foo');
foo.getElementsByClassName('test');
ready
jQuery $('#id')
var $foo = $('#foo');
$foo.find('.test');
ready
jQuery + native JS
var $foo = $(document.getElementById('foo'));
$foo.find('.test');
ready
jQuery + cached native node
var $foo = $(nativeFoo);
$foo.find('.test');
ready
Cached jQuery
$foo.find('.test');
ready
Cached jQuery(nativeElement)
$nativeFoo.find('.test');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.