viewloader-selection

JavaScript performance comparison

Test case created by Max

Preparation code

<script src="https://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

<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"/>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
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.

0 Comments