ko.viewmodel vs ko.mapping vs knockout.wrap vs custom (v18)

Revision 18 of this benchmark created by Aymeric on

Description

Performance comparison between the knockout mapping plugins ko.viewmodel and ko.mapping and knockout.wrap

Added custom mapper code

Preparation HTML

<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>

Setup

ko.mapper = {
        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.data, mappingOptions); };
                        
                        if (mappingOptions[property]) {
                                createItem = mappingOptions[property].create;
                        }
    
                        target[property] = ko.observableArray(raw[property].map(function(item) {
                            return createItem({ data: item });
                        }));
                        
                    } else {
                        target[property] = this.mapProperty(raw[property], mappingOptions);
                    }
            }
            return target;
        },
        mapProperty: function(raw, mappingOptions) {
                if (raw != null && typeof raw === 'object') {
                        return this.fromJS(raw, mappingOptions, {});
                } else {
                        return ko.observable(raw);
                }
    
        }
    };
    
    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"}] 
            }      
        });   
            
    }

Test runner

Ready to run.

Testing in
TestOps/sec
ko.mapping
viewmodel = ko.mapping.fromJS(model);
ready
ko.viewmodel
viewmodel = ko.viewmodel.fromModel(model);
ready
knockout.wrap
viewmodel = ko.wrap.fromJS(model);
ready
custom mapper
viewmodel = ko.mapper.fromJS(model);
ready

Revisions

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