filter vs nth-child

JavaScript performance comparison

Test case created

Info

test the speed of iterating with function filter() and the children() vs css selector nth-child

Preparation code

<div class="main">
  <div class="main_child_1">
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
  </div>
  <div class="main_child_2">ici
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
  </div>
  <div class="main_child_3">
    <p>Lorem Ipsum</p>
  </div>
  <div class="main_child_4">      
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
    <div class="main_child_4_child_1">
      <p>Lorem Ipsum</p>
    </div>
    <div class="main_child_4_child_2">
      <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
      </ul>
    </div>
  </div>
  <div class="main_child_5">
    <p>Lorem Ipsum</p>
    <div class="main_child_5_child_1">
      <p>Lorem Ipsum</p>
    </div>
    <div class="main_child_5_child_2">
      <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
      </ul>
    </div>
  </div>
  <div class="main_child_6">
    <ul>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
      <li>Lorem Ipsum</li>
    </ul>
    <div class="main_child_6_child_1">
      <p>Lorem Ipsum</p>
    </div>
    <div class="main_child_6_child_2">
        ici
      <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
      </ul>
    </div>
    <div class="main_child_6_child_3">
      <p>Lorem Ipsum</p>
    </div>
  </div>
</div><script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 

Preparation code output

  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
ici
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum

Lorem Ipsum

  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum

Lorem Ipsum

  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum

Lorem Ipsum

ici
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum
  • Lorem Ipsum

Lorem Ipsum

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Filter
$(".main div > ul").filter(function() {
  return $(this).children().length > 3;
}).parent().css("background", "red");
pending…
nth-child
$("ul li:nth-child(4)").parent().parent().css("background", "red");
pending…

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

Compare results of other browsers

0 comments

Add a comment