map vs for loop to create array from data in dom

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" data-catalog-id="1025513">
                        <a href="#">
                                <span class="image"><img src="http://placehold.it/40x40/EEE" alt="Product Name"></span>
                                <span class="price">---</span>
                                <span class="store-name">---</span>
                        </a>
                </li>
               
                <li class="product" data-catalog-id="884286">
                        <a href="#">
                                <span class="image"><img src="http://placehold.it/40x40/EEE" alt="Product Name"></span>
                                <span class="price">---</span>
                                <span class="store-name">---</span>
                        </a>
                </li>
               
                <li class="product buy" data-catalog-id="870448">
                        <a href="#">
                                <span class="image"><img src="http://placehold.it/40x40/EEE" alt="Product Name"></span>
                                <span class="price">---</span>
                                <span class="store-name">---</span>
                        </a>
                </li>
               
                <li class="product" data-catalog-id="">
                        <a href="#">
                                <span class="image"><img src="http://placehold.it/40x40/EEE" alt="Product Name"></span>
                                <span class="price">---</span>
                                <span class="store-name">---</span>
                        </a>
                </li>
               
                <li class="product buy" data-catalog-id="1025153">
                        <a href="#">
                                <span class="image"><img src="http://placehold.it/40x40/EEE" alt="Product Name"></span>
                                <span class="price">---</span>
                                <span class="store-name">---</span>
                        </a>
                </li>
               
                <li class="product buy" data-catalog-id="20958023">
                        <a href="#">
                                <span class="image"><img src="http://placehold.it/40x40/EEE" alt="Product Name"></span>
                                <span class="price">---</span>
                                <span class="store-name">---</span>
                        </a>
                </li>
               
                <li class="product" data-catalog-id="">
                        <a href="#">
                                <span class="image"><img src="http://placehold.it/40x40/EEE" alt="Product Name"></span>
                                <span class="price">---</span>
                                <span class="store-name">---</span>
                        </a>
                </li>
               
                <li class="product" data-catalog-id="">
                        <a href="#">
                                <span class="image"><img src="http://placehold.it/40x40/EEE" alt="Product Name"></span>
                                <span class="price">---</span>
                                <span class="store-name">---</span>
                        </a>
                </li>
       
        </ul>

</div>
<script>
Benchmark.prototype.setup = function() {
    var products = $('[data-catalog-id]:not(.buy)');
};
</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
using .map() and .attr()
var ids = products.map(function() { 

    return $(this).attr('data-catalog-id');

});
pending…
using .map() and .data()
var ids = products.map(function() { 

    return $(this).data('catalog-id');

});
pending…
using loop, store empty ids as false, don't cache products[i]
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…
using loop, store empty ids as false, cache products[i] before loop
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…
using loop, store empty ids as false, cache products[i] inside loop
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…
using loop, don't store empty ids, cache products[i] inside loop
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