Create an array from DOM element lookups testing .map() vs a for loop

JavaScript performance comparison

Test case created by Josh

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


<div id="the-products">

<ul class="small-list">
<li class="product" itemscope="" itemtype="http://schema.org/Product" data-catalog-id=""><a href="/catalog/born_of_the_gods/brimaz_king_of_oreskos/992063" itemprop="url"><span class="image"><img src="http://crystal-cdn2.crystalcommerce.com/photos/1025153/medium/brimaz.jpg" alt="Brimaz, King of Oreskos" itemprop="image"></span> <!--<span class="name" itemprop="name">Brimaz, King of Oreskos</span>-->
         <span class="price">---</span> <span class="store-name">---</span></a></li>

<li class="product" itemscope="" itemtype="http://schema.org/Product" data-catalog-id=""><a href="/catalog/born_of_the_gods/brimaz_king_of_oreskos/992063" itemprop="url"><span class="image"><img src="http://crystal-cdn2.crystalcommerce.com/photos/1025153/medium/brimaz.jpg" alt="Brimaz, King of Oreskos" itemprop="image"></span> <!--<span class="name" itemprop="name">Brimaz, King of Oreskos</span>-->
         <span class="price">---</span> <span class="store-name">---</span></a></li>

<li class="product" itemscope="" itemtype="http://schema.org/Product" data-catalog-id=""><a href="/catalog/born_of_the_gods/brimaz_king_of_oreskos/992063" itemprop="url"><span class="image"><img src="http://crystal-cdn2.crystalcommerce.com/photos/1025153/medium/brimaz.jpg" alt="Brimaz, King of Oreskos" itemprop="image"></span> <!--<span class="name" itemprop="name">Brimaz, King of Oreskos</span>-->
         <span class="price">---</span> <span class="store-name">---</span></a></li>

       
<li class="product" itemscope="" itemtype="http://schema.org/Product" data-catalog-id="1025153"><a href="/catalog/born_of_the_gods/brimaz_king_of_oreskos/992063" itemprop="url"><span class="image"><img src="http://crystal-cdn2.crystalcommerce.com/photos/1025153/medium/brimaz.jpg" alt="Brimaz, King of Oreskos" itemprop="image"></span> <!--<span class="name" itemprop="name">Brimaz, King of Oreskos</span>-->
         <span class="price">---</span> <span class="store-name">---</span></a></li>

        <li class="product" itemscope="" itemtype="http://schema.org/Product" data-catalog-id="870444"><a href="/catalog/return_to_ravnica/jace_architect_of_thought/88385" itemprop="url"><span class="image"><img src="http://crystal-cdn1.crystalcommerce.com/photos/870444/medium/jace4.jpg" alt="Jace, Architect of Thought" itemprop="image"></span> <!--<span class="name" itemprop="name">Jace, Architect of Thought</span>-->
         <span class="price">---</span> <span class="store-name">---</span></a></li>

        <li class="product" itemscope="" itemtype="http://schema.org/Product" data-catalog-id="993993"><a href="/catalog/born_of_the_gods/kiora_the_crashing_wave/992783" itemprop="url"><span class="image"><img src="http://crystal-cdn3.crystalcommerce.com/photos/993993/medium/KioraTheCrashingWave.jpg" alt="Kiora, the Crashing Wave" itemprop="image"></span> <!--<span class="name" itemprop="name">Kiora, the Crashing Wave</span>-->
         <span class="price">---</span> <span class="store-name">---</span></a></li>

        <li class="product" itemscope="" itemtype="http://schema.org/Product" data-catalog-id="870448"><a href="/catalog/return_to_ravnica/mizzium_mortars/88386" itemprop="url"><span class="image"><img src="http://crystal-cdn1.crystalcommerce.com/photos/870448/medium/mizziummortars.jpg" alt="Mizzium Mortars" itemprop="image"></span> <!--<span class="name" itemprop="name">Mizzium Mortars</span>-->
         <span class="price">---</span> <span class="store-name">---</span></a></li>

        <li class="product" itemscope="" itemtype="http://schema.org/Product" data-catalog-id="884286"><a href="/catalog/magic_singles-return_to_ravnica_block-gatecrash/nightveil_specter/90215" itemprop="url"><span class="image"><img src="http://crystal-cdn1.crystalcommerce.com/photos/884286/medium/nightveil_specter.jpg" alt="Nightveil Specter" itemprop="image"></span> <!--<span class="name" itemprop="name">Nightveil Specter</span>-->
         <span class="price">---</span> <span class="store-name">---</span></a></li>

        <li class="product buy" itemscope="" itemtype="http://schema.org/Product" data-catalog-id="1025513"><a href="/catalog/born_of_the_gods/phenax_god_of_deception/994063" itemprop="url"><span class="image"><img src="http://crystal-cdn4.crystalcommerce.com/photos/1025513/medium/phenax.jpg" alt="Phenax, God of Deception" itemprop="image"></span> <!--<span class="name" itemprop="name">Phenax, God of Deception</span>-->
         <span class="price">---</span> <span class="store-name">---</span></a></li>
    </ul>

</div>

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
map with $(this).attr()
var products = $('[data-catalog-id]:not(.buy)');

var ids = products.map(function() {
return $(this).attr('data-catalog-id');
});
pending…
map with $(argument).attr()
var products = $('[data-catalog-id]:not(.buy)');

var ids = products.map(function(i, elem) {
return $(elem).attr('data-catalog-id');
});
pending…
for loop not caching product[i]
var products = $('[data-catalog-id]:not(.buy)');

var ids = buildBatch(products);

function buildBatch(products) {

        var len = products.length;
       
        var batch = [];
       
        var i = 0;
       
        for(i; i < len; i++) {
       
            var id = $(products[i]).attr('data-catalog-id') || false;
           
            batch.push(id);
       
        }
       
        return batch;

}
pending…
for loop caching products[i], defining var outside
var products = $('[data-catalog-id]:not(.buy)');

var ids = buildBatch(products);

function buildBatch(products) {

        var len = products.length;
       
        var batch = [];
       
        var i = 0;
       
        var product;
       
        for(i; i < len; i++) {
               
                product = products[i];
               
            var id = $(product).attr('data-catalog-id') || false;
           
            batch.push(id);
       
        }
       
        return batch;

}
pending…
for loop caching products[i], defining var inside
var products = $('[data-catalog-id]:not(.buy)');

var ids = buildBatch(products);

function buildBatch(products) {

        var len = products.length;
       
        var batch = [];
       
        var i = 0;
       
        for(i; i < len; i++) {
               
                var product = products[i];
               
            var id = $(product).attr('data-catalog-id') || false;
           
            batch.push(id);
       
        }
       
        return batch;

}
pending…
same as above - using .data() instead of .attr()
var products = $('[data-catalog-id]:not(.buy)');

var ids = buildBatch(products);

function buildBatch(products) {

    var len = products.length;
   
    var batch = [];
   
    var i = 0;
   
    for(i; i < len; i++) {
       
        var product = products[i];
       
        var id = $(product).attr('data-catalog-id') || false;
       
        batch.push(id);
   
    }
   
    return batch;

}
pending…
same as above - not adding empty data-catalog-id as false
var products = $('[data-catalog-id]:not(.buy)');

var ids = buildBatch(products);

function buildBatch(products) {

        var len = products.length;
       
        var batch = [];
       
        var i = 0;
       
        for(i; i < len; i++) {
               
                var product = products[i];
               
            if(var id = $(product).attr('data-catalog-id')) {
           
                batch.push(id);
               
            }
       
        }
       
        return batch;

}
pending…
same as above - not adding empty data-catalog-id as false
var products = $('[data-catalog-id]:not(.buy)');

var ids = buildBatch(products);

function buildBatch(products) {

        var len = products.length;
       
        var batch = [];
       
        var i = 0;
       
        for(i; i < len; i++) {
               
                var product = products[i];
               
            if(var id = $(product).attr('data-catalog-id')) {
           
                batch.push(id);
               
            }
       
        }
       
        return batch;

}
pending…
same as above - not adding empty data-catalog-id as false
var products = $('[data-catalog-id]:not(.buy)');

var ids = buildBatch(products);

function buildBatch(products) {

    var len = products.length;
   
    var batch = [];
   
    var i = 0;
   
    for(i; i < len; i++) {
       
        var product = products[i];
       
        var id = $(product).attr('data-catalog-id');
       
        if(id) {
       
            batch.push(id);
           
        }
   
    }
   
    return batch;

}
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