Angular VS Ext JS 5: DOM Update Speed (v45)

Revision 45 of this benchmark created by Arthur Kay on

Description

The original version purported to insert xxx number of items into a list and demonstrate the performance differences in various platforms. In reality only Ext was actually modifying the DOM since the other frameworks relied on the fact that the inserted item was identical to the previous item.

This revision modifies the sample data to be different for every test, guaranteeing DOM updates. The sample data is also the same between Angular and Ext JS (previously Angular had flat arrays, whereas Ext JS was using arrays of objects).

I updated Ext JS to the latest version and use an XTemplate instead of a Grid so that the platforms are creating similar markup with similar capabilities.

Knockout and Backbone have been removed, due to the issues noted in many previous revisions of this test.

jQuery 1.9.x and Angular 1.1.x still support IE8. Ext JS 5 still supports IE 8. I believe this to be a relatively fair comparison in that sense.

Judging by the results I see, it seems that Angular/jQuery are well optimized for smaller data sets (<= 100). When data sets grow in size Ext JS 5 performs significantly better.

Preparation HTML

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

<!-- ANGULAR -->
<script src="http://code.angularjs.org/1.1.5/angular.min.js" ng:autobind></script>

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

    SetANG= function(data){
        $('#angList').scope().data = data;
        $('#angList').scope().$apply(function(){});
    };
</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 -->

<!-- EXT -->
<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));
    };
});
</script>
</div>

<!-- SET THE SAMPLE DATA -->
<script>
    var i = 0;
    var fillArray = function(total, angArr, extArr) {
        total += i;
        for (i; i<total; i++) {
            angArr.push({ name : 'ITEM ' + i });
            extArr.push({ name : 'ITEM ' + i });
        }
    };

    var ANG5ID=[], EXT5ID=[];
    fillArray(5, ANG5ID, EXT5ID);

    var ANG100ID=[], EXT100ID=[];
    fillArray(100, ANG100ID, EXT100ID);

    var ANG500ID=[], EXT500ID=[];
    fillArray(500, ANG500ID, EXT500ID);

    var ANG1000ID=[], EXT1000ID=[];
    fillArray(1000, ANG1000ID, EXT1000ID);
</script>

Setup

//Initialize each to 5 to verify identical output
    SetANG(ANG5ID);
    SetEXT(EXT5ID);

Test runner

Ready to run.

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

Revisions

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