Angular VS Ext JS 5 vs Mithril: DOM Update Speed (v51)

Revision 51 of this benchmark created by Jay Dunning on

Description

This is Arthur Kay's example (version 45), slightly refactored, plus a Mithril example. Please see the notes in Arthur Kay's example. Angular updated to 1.2.16.

Note that to be valid, instances of this example must write to the DOM and display results.

Preparation HTML

<!-- JQUERY -->
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>

<!-- Function to set sample data
     Note the global 'i' -->
<script>
    var i = 0;
    var defaultCtor = function(value) { return {name: value}; };
    var fillArray = function(total, arr, ctor) {
        ctor = ctor || defaultCtor;
        total += i;
        for (i; i<total; i++) {
            arr.push(ctor('ITEM ' + i ));
        }
    };
</script>

<!-- AngularJS-->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js" ng:autobind></script>

<script>
    var Ctrl=function($scope){
        $scope.data=[];
    }

    SetANG= function(data){
        $('#angList').scope().data = data;
        $('#angList').scope().$apply(function(){});
    };

    var ANG5ID=[], ANG100ID=[], ANG500ID=[], ANG1000ID=[];
    fillArray(5, ANG5ID);
    fillArray(100, ANG100ID);
    fillArray(500, ANG500ID);
    fillArray(1000, ANG1000ID);

</script>

<div ng:app>
    Angular 1.1.5 with jQuery 1.9.0:<br />

    <ul ng-controller="Ctrl" id="angList" style="height: 100px; overflow-y: scroll;">
        <li ng-repeat="item in data">{{item.name}}</li>
    </ul>
</div> <!-- END ng:app -->

<!-- ExtJS-->
<script src="http://cdn.sencha.com/ext/beta/ext-5.0.0.736/build/ext-all.js"></script>

<div>
    EXT JS 5.0.0beta:<br />
    <ul id='extOutput' style="height: 100px; overflow-y: scroll;"></ul>

<script>
Ext.onReady(function() {
    var viewTpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<li>{name}</li>',
        '</tpl>', 
        {
            disableFormats : true,
            compiled       : true
        }
    );

    SetEXT=function (data){    
        Ext.DomHelper.overwrite('extOutput', viewTpl.apply(data));
    };
});

    var EXT5ID=[], EXT100ID=[], EXT500ID=[], EXT1000ID=[];
    fillArray(5, EXT5ID);
    fillArray(100, EXT100ID);
    fillArray(500, EXT500ID);
    fillArray(1000, EXT1000ID);

</script>
</div>

<!-- Mithril -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/mithril/0.1.16/mithril.min.js"></script>
<div>
    Mithril 0.1.16:<br />
<div id="mithril"></div> 
</div>
<script>
    var mithapp = {
        data: m.prop([]),
        controller: function() {
            this.data = mithapp.data;
        },
        view: function(ctrl) {
            return m('ul#mithList', {style: 'height:100px; overflow-y:scroll' },
                     ctrl.data().map(function(item) { 
                         return m('li', item.name);}));
        }
    };

    var SetMITH = function(data){
        m.startComputation(); // normally these wouldn't be needed
        mithapp.data(data);
        m.endComputation();
    };

    var MITH5ID=[], MITH100ID=[], MITH500ID=[], MITH1000ID=[];
    fillArray(5, MITH5ID);
    fillArray(100, MITH100ID);
    fillArray(500, MITH500ID);
    fillArray(1000, MITH1000ID);

alert(document.getElementById('mithril'));
m.module(document.getElementById('mithril'), mithapp);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Angular 0-100 Items
SetANG(ANG100ID);
ready
ExtJS 0-100 Items
SetEXT(EXT100ID);
ready
Mithril 0-100 items
SetMITH(MITH100ID);
ready
Angular 0-500 Items
SetANG(ANG500ID);
ready
ExtJS 0-500 Items
SetEXT(EXT500ID);
ready
Mithril 0-500 Items
SetMITH(MITH500ID);
ready
Angular 0-1000 Items
SetANG(ANG1000ID);
ready
ExtJS 0-1000 Items
SetEXT(EXT1000ID);
ready
Mithril 0-1000 Items
SetMITH(MITH1000ID);
ready

Revisions

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