knockout properties init

JavaScript performance comparison

Test case created by Andrey

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!--<script src="http://knockoutjs.com/downloads/knockout-3.1.0.js"></script>-->
<script src="http://knockoutjs.com/downloads/knockout-3.0.0.js"></script>



<div id="Testcontainer1" >
        <div data-bind="foreach: items">
                <div data-bind="text: $data.Prop1">
                </div>
                <div data-bind="text: $data.Prop2">
                </div>
                <div data-bind="text: $data.Prop3">
                </div>
                <div data-bind="text: $data.Prop4">
                </div>
                <div data-bind="text: $data.Prop5">
                </div>
                <div data-bind="text: $data.Prop6">
                </div>
                <div data-bind="text: $data.Prop7">
                </div>
                <div data-bind="text: $data.Prop8">
                </div>
                <div data-bind="text: $data.Prop9">
                </div>
                <div data-bind="text: $data.Prop0">
                </div>
        </div>
</div>


<div id="Testcontainer2" >
        <div data-bind="foreach: items">
                <div data-bind="text: $data.Prop1">
                </div>
                <div data-bind="text: $data.Prop2">
                </div>
                <div data-bind="text: $data.Prop3">
                </div>
                <div data-bind="text: $data.Prop4">
                </div>
                <div data-bind="text: $data.Prop5">
                </div>
                <div data-bind="text: $data.Prop6">
                </div>
                <div data-bind="text: $data.Prop7">
                </div>
                <div data-bind="text: $data.Prop8">
                </div>
                <div data-bind="text: $data.Prop9">
                </div>
                <div data-bind="text: $data.Prop0">
                </div>
        </div>
</div>


<div id="Testcontainer3" >
        <div data-bind="foreach: items">
                <div data-bind="text: $data.Prop1">
                </div>
                <div data-bind="text: $data.Prop2">
                </div>
                <div data-bind="text: $data.Prop3">
                </div>
                <div data-bind="text: $data.Prop4">
                </div>
                <div data-bind="text: $data.Prop5">
                </div>
                <div data-bind="text: $data.Prop6">
                </div>
                <div data-bind="text: $data.Prop7">
                </div>
                <div data-bind="text: $data.Prop8">
                </div>
                <div data-bind="text: $data.Prop9">
                </div>
                <div data-bind="text: $data.Prop0">
                </div>
        </div>
</div>


<script type="text/javascript">

var Item_obj = function(data) {

  var self = this;
  self.Prop1 = ko.observable(data.Prop1);
  self.Prop2 = ko.observable(data.Prop2);
  self.Prop3 = ko.observable(data.Prop3);
  self.Prop4 = ko.observable(data.Prop4);
  self.Prop5 = ko.observable(data.Prop5);
  self.Prop6 = ko.observable(data.Prop6);
  self.Prop7 = ko.observable(data.Prop7);
  self.Prop8 = ko.observable(data.Prop8);
  self.Prop9 = ko.observable(data.Prop9);
  self.Prop0 = ko.observable(data.Prop0);
};

var Item_prop = function(p1,p2,p3,p4,p5,p6,p7,p8,p9,p0) {

  var self = this;
  self.Prop1 = ko.observable(p1);
  self.Prop2 = ko.observable(p2);
  self.Prop3 = ko.observable(p3);
  self.Prop1 = ko.observable(p4);
  self.Prop2 = ko.observable(p5);
  self.Prop3 = ko.observable(p6);
  self.Prop1 = ko.observable(p7);
  self.Prop2 = ko.observable(p8);
  self.Prop3 = ko.observable(p9);
  self.Prop3 = ko.observable(p0);
};


var Item_obj2 = function(data) {

  var self = this;
  self.Prop1 = ko.observable(data["Prop1"]);
  self.Prop2 = ko.observable(data["Prop2"]);
  self.Prop3 = ko.observable(data["Prop3"]);
  self.Prop1 = ko.observable(data["Prop4"]);
  self.Prop2 = ko.observable(data["Prop5"]);
  self.Prop3 = ko.observable(data["Prop6"]);
  self.Prop1 = ko.observable(data["Prop7"]);
  self.Prop2 = ko.observable(data["Prop8"]);
  self.Prop3 = ko.observable(data["Prop9"]);
  self.Prop1 = ko.observable(data["Prop0"]);
};


function TestModel_1() {

        var self = this;
        self.items = ko.observableArray();
 
        (function () {
         self.update = function() {
                        var temp = [];
                        for (var i = 0; i < 1000; i++) {
                                temp.push(new Item_obj({
                                        Prop1: "" + i,
                                        Prop2: "" + i,
                                        Prop3: "" + i,
                                        Prop4: "" + i,
                                        Prop5: "" + i,
                                        Prop6: "" + i,
                                        Prop7: "" + i,
                                        Prop8: "" + i,
                                        Prop9: "" + i,
                                        Prop0: "" + i
                                        }));
                        }
                        self.items(temp);
                        temp.length = 0;
                        };
                });
};


function TestModel_2() {

        var self = this;
        self.items = ko.observableArray();
 
        (function () {
         self.update = function() {
                        var temp = [];
                        for (var i = 0; i < 1000; i++) {
                                temp.push(new Item_prop("" + i, "" + i, "" + i, "" + i, "" + i, "" + i, "" + i, "" + i, "" + i, "" + i));
                        }
                        self.items(temp);
                        temp.length = 0;
                        };
                });
};


function TestModel_3() {

        var self = this;
        self.items = ko.observableArray();
 
        (function () {
         self.update = function() {
                        var temp = [];
                        for (var i = 0; i < 1000; i++) {
                                temp.push(new Item_obj2({
                                        Prop1: "" + i,
                                        Prop2: "" + i,
                                        Prop3: "" + i,
                                        Prop4: "" + i,
                                        Prop5: "" + i,
                                        Prop6: "" + i,
                                        Prop7: "" + i,
                                        Prop8: "" + i,
                                        Prop9: "" + i,
                                        Prop0: "" + i
                                        }));
                        }
                        self.items(temp);
                        temp.length = 0;
                        };
                });
};

</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
simple obj
var mod = new TestModel_1();
ko.cleanNode($('#Testcontainer1')[0]);
ko.applyBindings(mod, $('#Testcontainer1')[0]);
pending…
simple prop
var mod = new TestModel_2();
ko.cleanNode($('#Testcontainer2')[0]);
ko.applyBindings(mod, $('#Testcontainer2')[0]);
pending…
other obj
var mod = new TestModel_3();
ko.cleanNode($('#Testcontainer3')[0]);
ko.applyBindings(mod, $('#Testcontainer3')[0]);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment