Mask / Angular / jQuery / Ember (v30)

Revision 30 of this benchmark created by tenbits on

Description

    • Ember.
    • Mask

  • ++ fake new elements with counter++, as angularjs uses dirty check and doesnt update dom

Preparation HTML

<!-- Jquery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<h1>jQuery:</h1>
<div id="jq_test"></div>

<script>
var MAX = 50, index = 0, counter = 0;
var jqEl = $('#jq_test');
var children = '';
var jqPush = function (data) {
  children += '<span>' + data + '</span>';
}
var jqRender = function () {
  jqEl.append(children);
  //jqEl.append('<span>' + data + '</span>');
} 
var jqClear = function () {
  jqEl.empty();
  children = '';
}
</script>

<!-- Angular -->
<div ng-app>
  <h1>Angular:</h1>
  <div ng-controller="Ctrl" id="angList"><span ng-repeat="item in data">{{item}}</span></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"></script>

<script>
  var Ctrl = function($scope){
    $scope.data = [];
  }
  
  angular.element(document).ready(function() {
    var angScope = $('#angList').scope();
    
    window.angularClear = function(){
      angScope.data.splice(0, angScope.data.length);
     // angScope.$digest();
    };
    window.angularPush = function(data){
      angScope.data.push(data);
     // angScope.$digest();
    };
    window.angularApply = function(data){
      angScope.$apply();
    };
  });
</script> 

<!-- Native -->
<h1>Native (getElementById):</h1>
<div id="native_test"></div>

<script>
var nativeEl = document.getElementById('native_test');
var nativeChildren = '';
var nativePush = function (data) {
  var el = '<span>' + data + '</span>';
  nativeChildren += el;
}
var nativeRender = function () {
  nativeEl.innerHTML = nativeChildren;
}
var nativeClear = function () {
  nativeEl.innerHTML = "";
  nativeChildren = null;
  nativeChildren = '';
}


</script> 




<!-- Ember -->
<div id="emapp">
  <h1>Ember:</h1>
  <script type="text/x-handlebars">
      {{#each EMapp.data}}<span>{{this}}</span>{{/each}}
  </script>
</div>

<script>
  var ENV = {EXTEND_PROTOTYPES: false};
</script>

<script>
  var ENV = {
    EXTEND_PROTOTYPES: false
  };
</script>
<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js">
</script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.min.js">
</script>
<script>
  EMapp = Ember.Application.create({
    rootElement: $('#emapp')
  });
  EMapp.data = Ember.A();

  EMclear = function() {
    EMapp.set("data", Ember.A());
  };

  EMpush = function(data) {
    EMapp.data.pushObject(data);
  };
</script>

<script src="https://rawgithub.com/atmajs/MaskJS/master/lib/mask.min.js?v=.9"></script>
<h1>Mask:</h1>
<div id="mask_test"></div>
<script>
  
  window.mask_Model = { arr: [] };
  
  // binded arr property
  var template = "div > %% each=arr > span > '~[.]'",
      dom = mask.render(template, mask_Model),
      element = document.querySelector('#mask_test');

  element.appendChild(dom);
  

  

</script>

Teardown


    counter = 0;

Test runner

Ready to run.

Testing in
TestOps/sec
Mask
var newArr = [];
index = MAX;
while(--index) newArr.push('msk-item' + (counter++));

mask_Model.arr = newArr ;
ready
Ember
EMclear();
Ember.beginPropertyChanges();
index = MAX;
while(--index)   EMpush("em-item" + (counter++));

Ember.endPropertyChanges();
window.run_number_em++;
ready
Angular
angularClear();
index = MAX;
while(--index) angularPush('ng-item' + (counter++));
angularApply();
ready
jQuery
jqClear();
index = MAX;
while(--index)   jqPush('jq-item' + (counter++));

jqRender();
 
ready
Native
nativeClear();
index = MAX;
while(--index) nativePush('native-item');

nativeRender();
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.