Each vs data-selector

JavaScript performance comparison

Test case created by Nicklas

Info

Checking if an each loop is faster than a query on data-attribute when returning first child.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="test">
<div data-group="foo">Foo 1</div>
<div data-group="foo">Foo 2</div>
<div data-group="foo">Foo 3</div>
<div data-group="foo">Foo 4</div>
<div data-group="bar">Bar 1</div>
<div data-group="bar">Bar 2</div>
<div data-group="bar">Bar 3</div>
<div data-group="bar">Bar 4</div>
<div data-group="foo">Foo 5</div>
<div data-group="foo">Foo 6</div>
<div data-group="foo">Foo 7</div>
<div data-group="foo">Foo 8</div>
</div>
<script>
Benchmark.prototype.setup = function() {
    $.fn.getGroupByAttribute = function (group) {
        var $children = $('[data-group="' + group + '"]', this);
   
        // Return first child or empty jQuery
        return $children.length ? $children[0] : $();
    }
   
    $.fn.getGroupByEach = function (group) {
      var $result = $();
      $(this).each(function() {
        if($(this).data("group") == group) {
          result = $(this);
          return false;
        }
      });
      return $result;
    }
   
    var get_group = function ($from, group) {
      var $result = $();
      $from.each(function() {
        if($(this).data("group") == group) {
          result = $(this);
          return false;
        }
      });
      return $result;
    }
   
    var get_group_for = function ($from, group) {
        for (var i = 0; i < $from.length; i++) {
            if ($($from[i]).data("group") == group) {
                return $from[i];
            }
        }
    }
   
    var get_group_for_alt = function ($from, group) {
        for (var i = 0; i < $from.length; i++) {
            if ($($from[i]).data("group") == group) {
                return $($from[i]);
            }
        }
    }
   
    var get_group_while = function ($from, group) {
        var n = 0;
        while (n < $from.length) {
            if ($($from[n]).data('group') == group) {
                return $($from[n]);
            }
            n++;
        }
        return $();
    }
};
</script>

Preparation code output

Foo 1
Foo 2
Foo 3
Foo 4
Bar 1
Bar 2
Bar 3
Bar 4
Foo 5
Foo 6
Foo 7
Foo 8

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
data-attribute
$('#test').getGroupByAttribute('bar');
pending…
each, $.fn.extend
$('#test').getGroupByEach('bar');
pending…
each, separate function
get_group($('#test'), 'bar');
pending…
data-attribute:first
$('#test').find('[data-attribute="bar"]:first');
pending…
data-attribute, eq(0)
$('#test').find('[data-attribute="bar"]').eq(0);
pending…
for loop
get_group_for($('#test'), 'bar');
pending…
for loop, returns jQuery
get_group_for_alt($('#test'), 'bar');
pending…
while loop
get_group_while($('#test'), 'bar');
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