menu elements

JavaScript performance comparison

Revision 5 of this test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<ul id="educationList">
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
  <li class="category">
    <p>
      Media production
    </p>
    <ul>
      <li class="education" style="display: none;">
        <a href="#">Real time 3D animation</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Filming with Steadicam</a>
      </li>
      <li class="education" style="display: none;">
        <a href="#">Sound Effects</a>
      </li>
    </ul>
  </li>
</ul>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
my way
 
$('li.category:not(:has(li:visible))').hide();
 pending…
The high horse way
 
$('li.category').each(function() {
  var $li = $(this);
  if (!$li.find('li:visible').length) {
    $li.hide();
  }
});
 pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment