AngularJS vs Handlebars vs Mithril

Benchmark created on

Preparation HTML

<script src="https://cdn.jsdelivr.net/jquery/2.1.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/angularjs/1.2.15/angular.min.js"></script>
    <script src="https://cdn.jsdelivr.net/handlebarsjs/1.3.0/handlebars.js"></script>
    <script src="https://cdn.jsdelivr.net/mithril/0.1.16/mithril.min.js"></script>
    
    <!-- Angular -->
    <div ng-app>
      Angular:
      <span ng-controller="Ctrl" id="angList">
        <span ng-repeat="item in data">{{item}}</span>
      </span>
    </div>
    
    <!-- Handlebars -->
    <div id="hbapp"></div>
    <script type="text/x-handlebars" id="hbtemplate">
      Handlebars:
      <span>
        {{#each data}}<span>{{this}}</span>{{/each}}
      </span>
    </script>
    
    <!-- Mithril -->
    <div id="mithrilapp">
      Mithril: <span id="mithrilMountNode"></span>
    </div>
    
    <script>
      var Ctrl = function($scope) { $scope.data = []; };
      
      var MithrilData = [];
      var mithapp = {
        controller: function() {
          this.data = MithrilData;
        },
        view: function(ctrl) {
          return m('span', ctrl.data.map(function(datum) { return m('span', datum); }));
        }
      }
      
      var HBapp = { data: [] };
      
      $(document).ready(function() {
        var ang_scope = $('#angList').scope();
        window.ANGclear = function() {
          ang_scope.data.splice(0);
          ang_scope.$digest();
        };
        window.ANGpush = function(data) {
          ang_scope.data.push(data);
          ang_scope.$digest();
        }
        
        var hbTmpl = Handlebars.compile($('#hbtemplate').html());
        window.HBclear = function() {
          HBapp.data.splice(0);
          $('#hbapp').html(hbTmpl(HBapp));
        }
        window.HBpush = function(data) {
          HBapp.data.push(data);
          $('#hbapp').html(hbTmpl(HBapp));
        }
        
        m.module(document.getElementById('mithrilMountNode'), mithapp);
        window.Mclear = function() {
          MithrilData.splice(0);
          m.redraw();
        }
        window.Mpush = function(data) {
          MithrilData.push(data);
          m.redraw();
        }
      });
    </script>

Test runner

Ready to run.

Testing in
TestOps/sec
Angular 10
ANGclear();
for (var i = 0; i < 10; i++)
  ANGpush(i + '|');
ready
Angular 100
ANGclear();
for (var i = 0; i < 100; i++)
  ANGpush(i + '|');
ready
Angular 500
ANGclear();
for (var i = 0; i < 500; i++)
  ANGpush(i + '|');
ready
Handlebars 10
HBclear();
for (var i = 0; i < 10; i++)
  HBpush(i + '|');
ready
Handlebars 100
HBclear();
for (var i = 0; i < 100; i++)
  HBpush(i + '|');
ready
Handlebars 500
HBclear();
for (var i = 0; i < 500; i++)
  HBpush(i + '|');
ready
Mithril 10
Mclear();
for (var i = 0; i < 10; i++)
  Mpush(i + '|');
ready
Mithril 100
Mclear();
for (var i = 0; i < 100; i++)
  Mpush(i + '|');
ready
Mithril 500
Mclear();
for (var i = 0; i < 500; i++)
  Mpush(i + '|');
ready

Revisions

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