viewloader-selection

JavaScript performance comparison

Test case created by Max

Info

Testing performance implications of selection methods for named attributes.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div data-view="test1"/>
<div data-view="test2"/>
<div data-view="test3"/>
<div data-view="test4"/>
<div data-view="test5"/>
<div data-view="test6"/>
<div data-view="test7"/>
<div data-view="test8"/>
<div data-view="test9"/>
<div data-view="test10"/>
<div data-view="test11"/>
<div data-view="test12"/>
<div data-view="test13"/>
<div data-view="test14"/>
<div data-view="test15"/>
<div data-view="test16"/>
<div data-view="test17"/>
<div data-view="test18"/>
<div data-view="test19"/>
<div data-view="test20"/>
<div data-view="test21"/>
<div data-view="test22"/>
<div data-view="test23"/>
<div data-view="test24"/>
<div data-view="test25"/>
<div data-view="test26"/>
<div data-view="test27"/>
<div data-view="test28"/>
<div data-view="test29"/>
<div data-view="test30"/>
<div data-view="test31"/>
<div data-view="test32"/>
<div data-view="test33"/>
<div data-view="test34"/>
<div data-view="test35"/>
<div data-view="test36"/>
<div data-view="test37"/>
<div data-view="test38"/>
<div data-view="test39"/>
<div data-view="test40"/>
<div data-view="test41"/>
<div data-view="test42"/>
<div data-view="test43"/>
<div data-view="test44"/>
<div data-view="test45"/>
<div data-view="test46"/>
<div data-view="test47"/>
<div data-view="test48"/>
<div data-view="test49"/>
<div data-view="test50"/>

<div data-view-test1="foo"/>
<div data-view-test2="foo"/>
<div data-view-test3="foo"/>
<div data-view-test4="foo"/>
<div data-view-test5="foo"/>
<div data-view-test6="foo"/>
<div data-view-test7="foo"/>
<div data-view-test8="foo"/>
<div data-view-test9="foo"/>
<div data-view-test10="foo"/>
<div data-view-test11="foo"/>
<div data-view-test12="foo"/>
<div data-view-test13="foo"/>
<div data-view-test14="foo"/>
<div data-view-test15="foo"/>
<div data-view-test16="foo"/>
<div data-view-test17="foo"/>
<div data-view-test18="foo"/>
<div data-view-test19="foo"/>
<div data-view-test20="foo"/>
<div data-view-test21="foo"/>
<div data-view-test22="foo"/>
<div data-view-test23="foo"/>
<div data-view-test24="foo"/>
<div data-view-test25="foo"/>
<div data-view-test26="foo"/>
<div data-view-test27="foo"/>
<div data-view-test28="foo"/>
<div data-view-test29="foo"/>
<div data-view-test30="foo"/>
<div data-view-test31="foo"/>
<div data-view-test32="foo"/>
<div data-view-test33="foo"/>
<div data-view-test34="foo"/>
<div data-view-test35="foo"/>
<div data-view-test36="foo"/>
<div data-view-test37="foo"/>
<div data-view-test38="foo"/>
<div data-view-test39="foo"/>
<div data-view-test40="foo"/>
<div data-view-test41="foo"/>
<div data-view-test42="foo"/>
<div data-view-test43="foo"/>
<div data-view-test44="foo"/>
<div data-view-test45="foo"/>
<div data-view-test46="foo"/>
<div data-view-test47="foo"/>
<div data-view-test48="foo"/>
<div data-view-test49="foo"/>
<div data-view-test50="foo"/>
<script>
Benchmark.prototype.setup = function() {
    var views = {
      test1: function($el) {
        console.log($el.data("view"))
      },
      test2: function($el) {
        console.log($el.data("view"))
      },
      test3: function($el) {
        console.log($el.data("view"))
      },
      test4: function($el) {
        console.log($el.data("view"))
      },
      test5: function($el) {
        console.log($el.data("view"))
      },
      test6: function($el) {
        console.log($el.data("view"))
      },
      test7: function($el) {
        console.log($el.data("view"))
      },
      test8: function($el) {
        console.log($el.data("view"))
      },
      test9: function($el) {
        console.log($el.data("view"))
      },
      test10: function($el) {
        console.log($el.data("view"))
      },
      test11: function($el) {
        console.log($el.data("view"))
      },
      test12: function($el) {
        console.log($el.data("view"))
      },
      test13: function($el) {
        console.log($el.data("view"))
      },
      test14: function($el) {
        console.log($el.data("view"))
      },
      test15: function($el) {
        console.log($el.data("view"))
      },
      test16: function($el) {
        console.log($el.data("view"))
      },
      test17: function($el) {
        console.log($el.data("view"))
      },
      test18: function($el) {
        console.log($el.data("view"))
      },
      test19: function($el) {
        console.log($el.data("view"))
      },
      test20: function($el) {
        console.log($el.data("view"))
      },
      test21: function($el) {
        console.log($el.data("view"))
      },
      test22: function($el) {
        console.log($el.data("view"))
      },
      test23: function($el) {
        console.log($el.data("view"))
      },
      test24: function($el) {
        console.log($el.data("view"))
      },
      test25: function($el) {
        console.log($el.data("view"))
      },
      test26: function($el) {
        console.log($el.data("view"))
      },
      test27: function($el) {
        console.log($el.data("view"))
      },
      test28: function($el) {
        console.log($el.data("view"))
      },
      test29: function($el) {
        console.log($el.data("view"))
      },
      test30: function($el) {
        console.log($el.data("view"))
      },
      test31: function($el) {
        console.log($el.data("view"))
      },
      test32: function($el) {
        console.log($el.data("view"))
      },
      test33: function($el) {
        console.log($el.data("view"))
      },
      test34: function($el) {
        console.log($el.data("view"))
      },
      test35: function($el) {
        console.log($el.data("view"))
      },
      test36: function($el) {
        console.log($el.data("view"))
      },
      test37: function($el) {
        console.log($el.data("view"))
      },
      test38: function($el) {
        console.log($el.data("view"))
      },
      test39: function($el) {
        console.log($el.data("view"))
      },
      test40: function($el) {
        console.log($el.data("view"))
      },
      test41: function($el) {
        console.log($el.data("view"))
      },
      test42: function($el) {
        console.log($el.data("view"))
      },
      test43: function($el) {
        console.log($el.data("view"))
      },
      test44: function($el) {
        console.log($el.data("view"))
      },
      test45: function($el) {
        console.log($el.data("view"))
      },
      test46: function($el) {
        console.log($el.data("view"))
      },
      test47: function($el) {
        console.log($el.data("view"))
      },
      test48: function($el) {
        console.log($el.data("view"))
      },
      test49: function($el) {
        console.log($el.data("view"))
      },
      test50: function($el) {
        console.log($el.data("view"))
      }
    }
};
</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
Current viewloader
window.viewloader = {
  execute: function( views, $scope ) {
    var $els = $scope ? $scope.find( "[data-view]" ) : $( "[data-view]" );
   
    $els.each( function( i, el ) {
      var $el = $( el );
      var view = $el.data( "view" );
      if ( view && views[ view ] ) {
        views[ view ]( $el, el );
      }
    });
  }
};

viewloader.execute(views);
pending…
Seperate selectors
(function(root, factory) {
  root.viewloader = factory({},(root.jQuery || root.Zepto || root.$)); // Browser global
}(this, function(viewloader,$) {
  "use strict";
  var dasherize = function(s) {
    var r = /([a-z0-9][A-Z])/g,
    dash = function(m) {
      return m[0] + '-' + m[1].toLowerCase();
    };
    return s.replace(r, dash);
  };
  viewloader.execute = function(views, $scope) {
    for(var view in views) {
      var dashView = dasherize(view),
        selector = "[data-view-" + dashView + "]",
      $els = $scope ? $scope.find(selector) : $(selector);
      $els.each(function(i, el) {
        var $el = $(el);
        views[view]($el, el, $el.data("view-" + dashView));
      });
    };
  };
  return viewloader;
}));

viewloader.execute(views);
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