AngularJs Vs Pure JavaScript (v3)

Revision 3 of this benchmark created by angluarDomElements on November 6, 2014

Preparation HTML

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

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

<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

<!-- Pure JavaScript -->
<div>
  JavaScript:
  <span id="JavaScriptList"></span>
</div>

<!-- JavaScript Concat String -->
<div>
  JavaScript:
  <span id="JavaScriptCList"></span>
</div>

<script>
  var Ctrl = function($scope){
    $scope.data = [];
  }
  
angular.element(document).ready(function() {
    var ang_scope = $('#angList').scope();
    
    window.ANGclear = function(){
        ang_scope.data.splice(0, ang_scope.data.length);
        ang_scope.$digest();
    };
    window.ANGpush = function(data){
        ang_scope.data.push(data);
        ang_scope.$digest();
    };
});


var fn = function() {
    var js = {
        scope: document.getElementById("JavaScriptList"),
        data: []
    },
    digest = function () {
        js.scope.innerHTML = "";
        js.data.forEach(function (value,index) {
            js.scope.appendChild(document.createTextNode(js.data[index]));
        })
    };
   
    window.JSclear = function(){
        js.data.splice(0, js.data.length);
        digest(js);
    };
    window.JSpush = function(data){
        js.data.push(data);
        digest(js);
    };

    window.JSpush(1);
};

document.addEventListener('DOMContentLoaded', fn, false);


var fnC = function() {
    var js = {
        scope: document.getElementById("JavaScriptCList"),
        data: []
    },
    digest = function () {
        var hold = "";
        js.scope.innerHTML = "";
        js.data.forEach(function (value,index) {
            hold += js.data[index];
        })
        js.scope.innerHTML = hold;
    };
   
    window.JSCclear = function(){
        js.data.splice(0, js.data.length);
        digest(js);
    };
    window.JSCpush = function(data){
        js.data.push(data);
        digest(js);
    };

    window.JSCpush(1);
};

document.addEventListener('DOMContentLoaded', fnC, false);

</script>

Test runner

ANGclear();
for (var i = 0; i < 100; i++)
  ANGpush("ngitem");

JSclear();
for (var i = 0; i < 100; i++)
  JSpush("jsitem");

JSCclear();
for (var i = 0; i < 100; i++)
  JSCpush("jscitem");

Revisions

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

• Revision 1: published by angluarDomElements on November 6, 2014
• Revision 2: published on November 6, 2014
• Revision 3: published by angluarDomElements on November 6, 2014