viewloader-selection

JavaScript performance comparison

Revision 11 of this 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"/>

<div data-view-vanilla-test1="foo"/>
<div data-view-vanilla-test2="foo"/>
<div data-view-vanilla-test3="foo"/>
<div data-view-vanilla-test4="foo"/>
<div data-view-vanilla-test5="foo"/>
<div data-view-vanilla-test6="foo"/>
<div data-view-vanilla-test7="foo"/>
<div data-view-vanilla-test8="foo"/>
<div data-view-vanilla-test9="foo"/>
<div data-view-vanilla-test10="foo"/>
<div data-view-vanilla-test11="foo"/>
<div data-view-vanilla-test12="foo"/>
<div data-view-vanilla-test13="foo"/>
<div data-view-vanilla-test14="foo"/>
<div data-view-vanilla-test15="foo"/>
<div data-view-vanilla-test16="foo"/>
<div data-view-vanilla-test17="foo"/>
<div data-view-vanilla-test18="foo"/>
<div data-view-vanilla-test19="foo"/>
<div data-view-vanilla-test20="foo"/>
<div data-view-vanilla-test21="foo"/>
<div data-view-vanilla-test22="foo"/>
<div data-view-vanilla-test23="foo"/>
<div data-view-vanilla-test24="foo"/>
<div data-view-vanilla-test25="foo"/>
<div data-view-vanilla-test26="foo"/>
<div data-view-vanilla-test27="foo"/>
<div data-view-vanilla-test28="foo"/>
<div data-view-vanilla-test29="foo"/>
<div data-view-vanilla-test30="foo"/>
<div data-view-vanilla-test31="foo"/>
<div data-view-vanilla-test32="foo"/>
<div data-view-vanilla-test33="foo"/>
<div data-view-vanilla-test34="foo"/>
<div data-view-vanilla-test35="foo"/>
<div data-view-vanilla-test36="foo"/>
<div data-view-vanilla-test37="foo"/>
<div data-view-vanilla-test38="foo"/>
<div data-view-vanilla-test39="foo"/>
<div data-view-vanilla-test40="foo"/>
<div data-view-vanilla-test41="foo"/>
<div data-view-vanilla-test42="foo"/>
<div data-view-vanilla-test43="foo"/>
<div data-view-vanilla-test44="foo"/>
<div data-view-vanilla-test45="foo"/>
<div data-view-vanilla-test46="foo"/>
<div data-view-vanilla-test47="foo"/>
<div data-view-vanilla-test48="foo"/>
<div data-view-vanilla-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"))
    },
    vanillaTest1: function($el) {
      console.log($el.data("view"))
    },
    vanillaTest2: function($el) {
      console.log($el.data("view"))
    },
    vanillaTest3: function($el) {
      console.log($el.data("view"))
    },
    vanillaTest4: function($el) {
      console.log($el.data("view"))
    },
    vanillaTest5: function($el) {
      console.log($el.data("view"))
    },
    vanillaTest6: function($el) {
      console.log($el.data("view"))
    },
    vanillaTest7: function($el) {
      console.log($el.data("view"))
    },
    vanillaTest8: function($el) {
      console.log($el.data("view"))
    },
    vanillaTest9: function($el) {
      console.log($el.data("view"))
    },
    vanillaTest10: function($el) {
      console.log($el.data("view"))
    },
    vanillaTest11: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest12: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest13: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest14: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest15: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest16: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest17: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest18: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest19: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest20: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest21: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest22: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest23: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest24: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest25: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest26: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest27: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest28: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest29: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest30: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest31: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest32: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest33: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest34: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest35: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest36: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest37: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest38: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest39: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest40: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest41: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest42: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest43: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest44: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest45: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest46: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest47: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest48: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest49: function(el) {
      console.log(el.getAttribute("data-view"))
    },
    vanillaTest50: function(el) {
      console.log(el.getAttribute("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"/> <div data-view-vanilla-test1="foo"/> <div data-view-vanilla-test2="foo"/> <div data-view-vanilla-test3="foo"/> <div data-view-vanilla-test4="foo"/> <div data-view-vanilla-test5="foo"/> <div data-view-vanilla-test6="foo"/> <div data-view-vanilla-test7="foo"/> <div data-view-vanilla-test8="foo"/> <div data-view-vanilla-test9="foo"/> <div data-view-vanilla-test10="foo"/> <div data-view-vanilla-test11="foo"/> <div data-view-vanilla-test12="foo"/> <div data-view-vanilla-test13="foo"/> <div data-view-vanilla-test14="foo"/> <div data-view-vanilla-test15="foo"/> <div data-view-vanilla-test16="foo"/> <div data-view-vanilla-test17="foo"/> <div data-view-vanilla-test18="foo"/> <div data-view-vanilla-test19="foo"/> <div data-view-vanilla-test20="foo"/> <div data-view-vanilla-test21="foo"/> <div data-view-vanilla-test22="foo"/> <div data-view-vanilla-test23="foo"/> <div data-view-vanilla-test24="foo"/> <div data-view-vanilla-test25="foo"/> <div data-view-vanilla-test26="foo"/> <div data-view-vanilla-test27="foo"/> <div data-view-vanilla-test28="foo"/> <div data-view-vanilla-test29="foo"/> <div data-view-vanilla-test30="foo"/> <div data-view-vanilla-test31="foo"/> <div data-view-vanilla-test32="foo"/> <div data-view-vanilla-test33="foo"/> <div data-view-vanilla-test34="foo"/> <div data-view-vanilla-test35="foo"/> <div data-view-vanilla-test36="foo"/> <div data-view-vanilla-test37="foo"/> <div data-view-vanilla-test38="foo"/> <div data-view-vanilla-test39="foo"/> <div data-view-vanilla-test40="foo"/> <div data-view-vanilla-test41="foo"/> <div data-view-vanilla-test42="foo"/> <div data-view-vanilla-test43="foo"/> <div data-view-vanilla-test44="foo"/> <div data-view-vanilla-test45="foo"/> <div data-view-vanilla-test46="foo"/> <div data-view-vanilla-test47="foo"/> <div data-view-vanilla-test48="foo"/> <div data-view-vanilla-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
Vanilla
function matches(el, selector) {
  return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
}

function dasherize(s) {
  return s.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
}

function parseProps(str) {
  var props = str;
  if (/^{/.test(str)) {
    props = JSON.parse(str);
  }
  return props;
}

function execute(views, scope, includeScope) {
  for(var view in views) {
    var dashView = dasherize(view);
    var selector = "[data-view-" + dashView + "]";
    var elements = [];
    if (scope) {
      var scopeLength = scope.length;
      // Iterate over `scope` if it's a NodeList
      if (scopeLength) {
        Array.prototype.forEach.call(scope, function(node, i) {
          elements.concat(node.querySelectorAll(selector));
          if (includeScope === true && matches(node, selector)) {
            elements.push(node);
          }
        });
      } else {
        elements = scope.querySelectorAll(selector);
        if (includeScope === true && matches(scope, selector)) {
          elements.push(scope);
        }
      }
    } else {
      elements = document.querySelectorAll(selector);
    }
    Array.prototype.forEach.call(elements, function(el, i) {
      views[view].call(this, el, parseProps(el.getAttribute("data-view-" + dashView)));
    });
  }
}

var viewloader = {
  execute: execute
};
pending…
Seperate selectors with simpler dasherize function
//  viewloader 0.0.3
(function(root, factory) {
  root.viewloader = factory({},(root.jQuery || root.Zepto || root.$)); // Browser global
}(this, function(viewloader,$) {

  "use strict";
  var dasherize = function(s) {
    return s.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
  };
  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…
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