Angular VS Knockout (v388)

Revision 388 of this benchmark created on

Description

This is a simple rendering speed test between the most popular libraries/frameworks.

Preparation HTML

<!-- Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/knockout/3.2.0/knockout.js"></script>



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


<!-- Knockout -->
<div id="koapp">
  Knockout:
  <span data-bind="foreach: data"><span data-bind="text: $data"></span></span>
</div>

<div id="koappRL">
  Knockout:
  <span data-bind="foreach: data"><span data-bind="text: $data"></span></span>
</div>


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

var KOData = ko.observableArray();
var KOviewmodel = {data: KOData};

var ENV = {EXTEND_PROTOTYPES: false};


$(document).ready(function() {
  angular.element(document).ready(function() {
    var ang_scope = $('#angList').scope();

    window.ANGclear = function(){
      ang_scope.data = [];
      ang_scope.$apply();
    };
    window.ANGpush = function(data){
      ang_scope.data.push(data);
      ang_scope.$apply();
    };
  });

  ko.applyBindings(KOviewmodel, document.getElementById('koapp'));
  window.KOclear = function (){
    KOData.splice(0, KOData().length);
  };
  window.KOpush = function (data){
    KOData.push(data);
  };


var KODataRL = ko.observableArray();
KODataRL.extend({ rateLimit: 0 });
var KOviewmodelRL = {data: KODataRL};

ko.applyBindings(KOviewmodelRL, document.getElementById('koappRL'));
window.KOclearRL = function (){
    KODataRL.splice(0, KOData().length);
};
window.KOpushRL = function (data){
    KODataRL.push(data);
};  

  
});
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Angular 10
ANGclear();
for (var i = 0; i < 10; i++)
  ANGpush("nitem");
ready
Knockout 10
KOclear();
for (var i = 0; i < 10; i++)
  KOpush("kitem");
ready
Angular 100
ANGclear();
for (var i = 0; i < 100; i++)
  ANGpush("nitem");
ready
Knockout 100
KOclear();
for (var i = 0; i < 100; i++)
  KOpush("kitem");
ready
Angular 500
ANGclear();
for (var i = 0; i < 500; i++)
  ANGpush("nitem");
ready
Knockout 500
KOclear();
for (var i = 0; i < 500; i++)
  KOpush("kitem");
ready
Angular 1000
ANGclear();
for (var i = 0; i < 1000; i++)
  ANGpush("nitem");
ready
Knockout 1000
KOclear();
for (var i = 0; i < 1000; i++)
  KOpush("kitem");
ready

Revisions

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