ko.viewmodel vs ko.mapping vs knockout.wrap vs custom

JavaScript performance comparison

Revision 19 of this test case created by Aymeric

Preparation code

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script src="http://coderenaissance.github.com/knockout.viewmodel/knockout.viewmodel.min.js"></script>
<script src="https://raw.github.com/arj03/knockout.wrap/master/knockout.wrap.js"></script>
      
<script>
Benchmark.prototype.setup = function() {
  ko.mapper = {
      isFunction: function(functionToCheck) {
           var getType = {};
          return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
      },
      fromJS: function (raw, mappingOptions, target) {
          var self = this;
          mappingOptions = mappingOptions || {};
          target = target || {};
          for (var property in raw) {
  
              if (raw[property] instanceof Array) {
                  var createItem = function(options) { return self.mapProperty(options); };
  
                  if (mappingOptions[property]) {
                      createItem = mappingOptions[property].create;
                  }
  
                  var arrayToSet = raw[property].map(function(item) {
                      return createItem({ data: item, property: property, mapping: mappingOptions });
                  });
                  
                  if (this.isFunction(target[property])) {
                      target[property](arrayToSet);
                  } else {
                      target[property] = ko.observableArray(arrayToSet);
                  }
  
              } else {
                  this.setProperty(target, property, {data: raw[property], property: property, mapping: mappingOptions });
              }
          }
          return target;
      },
      setProperty: function (target, property, options) {
          if (options.mapping[options.property]) {
              target[property] = options.mapping[options.property].create({ data: options.data });
              return;
          }
  
          if (options.data != null && typeof options.data === 'object') {
              var obj = target[property] || {};
              target[property] = this.fromJS(options.data, options.mapping, obj);
          } else {
              if (this.isFunction(target[property])) {
                  target[property](options.data);
              } else {
                  target[property] = ko.observable(options.data);
              }
          }
      },
      mapProperty: function (options) {
          if (options.mapping[options.property]) {
              return options.mapping[options.property].create({data: options.data});
          }
  
          if (options.data != null && typeof options.data === 'object') {
              return this.fromJS(options.data, options.mapping, {});
          } else {
              return ko.observable(options.data);
          }
  
      }
  };
  var numberOfArrayRecords = 100,
      viewmodel = null,
      model = {
          items:[]
      };
  
  for(var x = 0; x < numberOfArrayRecords; x++){
      model.items.push({
          string:"Test",
          number:4,
          anotherObject:{
             items:[{id:4, name:"Test"},{id:7, name:"Test2"}] 
          }      
      });   
          
  }

};
</script>

Preparation code output

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script> <script src="http://coderenaissance.github.com/knockout.viewmodel/knockout.viewmodel.min.js"></script> <script src="https://raw.github.com/arj03/knockout.wrap/master/knockout.wrap.js"></script>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
ko.mapping
viewmodel = ko.mapping.fromJS(model);
pending…
ko.viewmodel
viewmodel = ko.viewmodel.fromModel(model);
pending…
knockout.wrap
viewmodel = ko.wrap.fromJS(model);
pending…
custom mapper
viewmodel = ko.mapper.fromJS(model);
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.

0 Comments