jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

jQuery :has(>child) vs. parent > child and .parent()

Benchmark created by c4urself on December 14, 2011

Description

Check the difference between using a :has() selector $("li:has(>a)") versus using a direct child selector and calling .parent() $("li > a").parent().

Preparation HTML

<ul>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
  <li>
    <a href="javascript://">Test Link</a>
  </li>
  <li>
    <span>
      No link, Just Spam
    </span>
  </li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Test runner

Ready to run.

Test Ops/sec

:has()

Testing in
Test	Ops/sec
:has()	`$("li:has(>a:first-child)").addClass("selected"); $("li:has(>a:first-child)").removeClass("selected");`	ready
direct child selector and .parent()	`$("li > a:first-child").parent().addClass("selected"); $("li > a:first-child").parent().removeClass("selected");`	ready

$("li:has(>a:first-child)").addClass("selected");
$("li:has(>a:first-child)").removeClass("selected");

ready

direct child selector and .parent()

$("li > a:first-child").parent().addClass("selected");
$("li > a:first-child").parent().removeClass("selected");

ready

Revisions

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

Revision 1: published by c4urself on December 14, 2011