find-v-children Again

Benchmark created on

Description

Use children or find when we are really only interested in the first level of descendants?

Preparation HTML

<ul id="list">
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <ul id="sublist1">
      <li>
        <a href="#">SubLink</a>
      </li>
      <li>
        <a href="#">SubLink</a>
      </li>
      <li>
        <a href="#">SubLink</a>
      </li>
      <li>
        <a href="#">SubLink</a>
      </li>
      <li>
        <a href="#">SubLink</a>
      </li>
      <li>
        <a href="#">SubLink</a>
      </li>
      <li>
        <a href="#">SubLink</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <ul id="sublist2">
      <li>
        <a href="#">SubLink2</a>
      </li>
      <li>
        <a href="#">SubLink2</a>
      </li>
      <li>
        <a href="#">SubLink2</a>
      </li>
      <li>
        <a href="#">SubLink2</a>
      </li>
      <li>
        <a href="#">SubLink2</a>
      </li>
      <li>
        <a href="#">SubLink2</a>
      </li>
      <li>
        <a href="#">SubLink2</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
  <li>
    <a href="#">Link</a>
  </li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
find li
var elem = $("#list").find("li");
ready
children li
var elem = $("#list").children("li");
ready
children (assumed li)
var elem = $("#list").children();
ready
css selector
var elem = $("#list li");
ready
contextual selector
var elem = $("li", "#list");
ready

Revisions

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