eachspeed123

JavaScript performance comparison

Test case created by Mikko Sika

Info

Just to test is the each find loop fast or not

Preparation code

<div class="container-fluid" id="projektilistadiv"> <div class="row-fluid">  

<div class="span4 projekti10 projektiviimeisimmat">
<p style="display: block;" class="projekticlick"><a href="#20012">20012</a></p>
<p style="display: block;" class="projekticlick"><a href="#20012">20012</a></p>
<p style="display: block;" class="projekticlick"><a href="#20012">20012</a></p>
<p style="display: block;" class="projekticlick"><a href="#20012">20012</a></p>
<p style="display: block;" class="projekticlick"><a href="#20012">20012</a></p>
<p style="display: block;" class="projekticlick"><a href="#20012">20012</a></p>
<p style="display: block;" class="projekticlick"><a href="#20012">20012</a></p>
<p style="display: block;" class="projekticlick"><a href="#20012">20012</a></p>
<p style="display: block;" class="projekticlick"><a href="#20012">20012</a></p>
<p style="display: block;" class="projekticlick"><a href="#20012">20012</a></p>
</div><div class="span4 projekti10 ksarake10">

<p style="display: block;" class="projekticlick"><a href="#20013">20013</a></p>
<p style="display: block;" class="projekticlick"><a href="#20013">20013</a></p>
<p style="display: block;" class="projekticlick"><a href="#20013">20013</a></p>
<p style="display: block;" class="projekticlick"><a href="#20013">20013</a></p>
<p style="display: block;" class="projekticlick"><a href="#20013">20013</a></p>
<p style="display: block;" class="projekticlick"><a href="#20013">20013</a></p>
<p style="display: block;" class="projekticlick"><a href="#20013">20013</a></p>
<p style="display: block;" class="projekticlick"><a href="#20013">20013</a></p>
<p style="display: block;" class="projekticlick"><a href="#20013">20013</a></p>
<p style="display: block;" class="projekticlick"><a href="#20013">20013</a></p>


</div><div class="span4 projekti10 ksarake20">
<p style="display: block;" class="projekticlick"><a href="#20014">20014</a></p>
<p style="display: block;" class="projekticlick"><a href="#20014">20014</a></p>
<p style="display: block;" class="projekticlick"><a href="#20014">20014</a></p>
<p style="display: block;" class="projekticlick"><a href="#20014">20014</a></p>
<p style="display: block;" class="projekticlick"><a href="#20014">20014</a></p>
<p style="display: block;" class="projekticlick"><a href="#20014">20014</a></p>
<p style="display: block;" class="projekticlick"><a href="#20014">20014</a></p>
<p style="display: block;" class="projekticlick"><a href="#20014">20014</a></p>
<p style="display: block;" class="projekticlick"><a href="#20014">20014</a></p>
<p style="display: block;" class="projekticlick"><a href="#20014">20014</a></p>

<!-- rivinvaihto -->
</div>
</div><div class="row-fluid krow30">

<div class="span4 projekti10 ksarake30">
<p style="display: block;" class="projekticlick"><a href="#20015">20015</a></p>
<p style="display: block;" class="projekticlick"><a href="#20015">20015</a></p>
<p style="display: block;" class="projekticlick"><a href="#20015">20015</a></p>
<p style="display: block;" class="projekticlick"><a href="#20015">20015</a></p>
<p style="display: block;" class="projekticlick"><a href="#20015">20015</a></p>
<p style="display: block;" class="projekticlick"><a href="#20015">20015</a></p>
<p style="display: block;" class="projekticlick"><a href="#20015">20015</a></p>
<p style="display: block;" class="projekticlick"><a href="#20015">20015</a></p>
<p style="display: block;" class="projekticlick"><a href="#20015">20015</a></p>
<p style="display: block;" class="projekticlick"><a href="#20015">20015</a></p>

</div><div class="span4 projekti10 ksarake40">
<p style="display: block;" class="projekticlick"><a href="#20016">20016</a></p>
<p style="display: block;" class="projekticlick"><a href="#20016">20016</a></p>
<p style="display: block;" class="projekticlick"><a href="#20016">20016</a></p>
<p style="display: block;" class="projekticlick"><a href="#20016">20016</a></p>
<p style="display: block;" class="projekticlick"><a href="#20016">20016</a></p>
<p style="display: block;" class="projekticlick"><a href="#20016">20016</a></p>
<p style="display: block;" class="projekticlick"><a href="#20016">20016</a></p>
<p style="display: block;" class="projekticlick"><a href="#20016">20016</a></p>
<p style="display: block;" class="projekticlick"><a href="#20016">20016</a></p>
<p style="display: block;" class="projekticlick"><a href="#20016">20016</a></p>

</div><div class="span4 projekti10 ksarake50">
<p style="display: block;" class="projekticlick"><a href="#20017">20017</a></p>
<p style="display: block;" class="projekticlick"><a href="#20017">20017</a></p>
<p style="display: block;" class="projekticlick"><a href="#20017">20017</a></p>
<p style="display: block;" class="projekticlick"><a href="#20017">20017</a></p>
<p style="display: block;" class="projekticlick"><a href="#20017">20017</a></p>
<p style="display: block;" class="projekticlick"><a href="#20017">20017</a></p>
<p style="display: block;" class="projekticlick"><a href="#20017">20017</a></p>
<p style="display: block;" class="projekticlick"><a href="#20017">20017</a></p>
<p style="display: block;" class="projekticlick"><a href="#20017">20017</a></p>
<p style="display: block;" class="projekticlick"><a href="#20017">20017</a></p>
<p style="display: block;" class="projekticlick"><a href="#20017">20017</a></p>
</div>
</div><p><br><br><button class="btn btn-mini btn-danger peruuta" type="button" id="projektilistacontainer_peruuta2">Peruuta</button></p>
</div><script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script>
Benchmark.prototype.setup = function() {
    keyword="20016";
   
};
</script>

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
eachloop1
$("#projektilistadiv").find("p").each(function() {
   
    var aText=$(this).html().toLowerCase();
    if(aText.indexOf(keyword) >= 0)
                {
                //löytyi!
                //$(this).parent().show();      //parent = <p>
                $(this).parent().addClass('red');
                }
        else
                {
                //$(this).parent().hide();
                $(this).parent().removeClass('red');
        }
});
pending…
eachloop2a
$("#projektilistadiv").find("a").each(function() {
   
    var aText=$(this).html().toLowerCase();
    if(aText.indexOf(keyword) >= 0)
                {
                //löytyi!
                //$(this).parent().show();      //parent = <p>
                $(this).parent().addClass('red');
                }
        else
                {
                //$(this).parent().hide();
                $(this).parent().removeClass('red');
        }
});
pending…
eachloop3achildr

$("#projektilistadiv").find("p").each(function() {
   
    var aText=$(this).children().html().toLowerCase();
    if(aText.indexOf(keyword) >= 0)
                {
                //löytyi!
                //$(this).parent().show();      //parent = <p>
                $(this).parent().addClass('red');
                }
        else
                {
                //$(this).parent().hide();
                $(this).parent().removeClass('red');
        }
});
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