Using getElementsByTagName vs children (v3)

Revision 3 of this benchmark created on


Description

Which is faster?

Preparation HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<ul id="list">
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
  <li>Placeholder text</li>
</ul>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById & getElementsByTagName
document.getElementById('list').getElementsByTagName('li');
ready
$({ID}) & getElementsByTagName
$('#list').get(0).getElementsByTagName('li');
ready
children w/ filter
$('#list').children('li');
ready
children w/out filter
$('#list').children();
ready
find
$('#list').find('li');
ready
dom children
document.getElementById('list').children;
ready

Revisions

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