jQuery first child selection performance (v10)

Revision 10 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
  var content = '';
  for (var i = 0; i < 500; i++) {
    content += '<div id="lkjsf' + i + '"></div>';
  }
  $('body').append('<div id="test" style="display:none">' + content + '</div>');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
first
$('#test :first')
ready
direct first
$('#test > :first')
ready
direct first-child
$('#test > :first-child')
ready
direct nth-child
$('#test > :nth-child(1)')
ready
eq
$('#test :eq(0)')
ready
find first
$('#test').find(':first')
ready
find direct first
$('#test').find('> :first')
ready
find element first
$('#test').find('div:first')
ready
find element eq
$('#test').find('div').eq(0)
ready
children first
$('#test').children(":first")
ready
children first in array as jquery object
$($('#test').children()[0])
ready
children eq
$('#test').children().eq(0)
ready
children first-child
$('#test').children(":first-child")
ready
children nth-child
$('#test').children(":nth-child(1)")
ready
DOM firstChild
//this test does not return a jQuery object -- see test 17
$('#test')[0].firstChild
ready
direct div first in array
$($('#test > div')[0])
ready
DOM first child as jQuery object
$($('#test')[0].firstChild)
ready
DOM first child element
var el = $('#test')[0].firstChild;
//the DOM firstChild property could return a text node or comment instead of an element
while (el && el.nodeType != 1)
  el = el.nextSibling;
//return jQuery object for apples to apples comparison
$(el);
ready
children first in array
$('#test').children()[0]
ready
children().first()
$('#test').children().first()
ready
Native & jQ mix
$(document.getElementById('test').firstChild)
ready

Revisions

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