JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.3/knockout.mapping.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/benchmark/0.3.0/benchmark.min.js"></script>
<script src="http://coderenaissance.github.com/knockout.viewmodel/knockout.viewmodel.min.js"></script>
JavaScript
var suite = new Benchmark.Suite;
var model = {
items:[]
}
var numberOfArrayRecords = 5000;
for(var i = 0; i < numberOfArrayRecords; i++){
model.items.push({
string:"Test",
number:4,
date:new Date(),
array:["Test","Test", "Test"]
});
}
suite.add('ko.mapping', function fnMap() {
var viewmodel = ko.mapping.fromJS(model);
})
.add('ko.viewmodel', function fnVM() {
var viewmodel = ko.viewmodel.fromModel(model);
})
.on('complete',
function() {
var slowest = this.filter('slowest'),
fastest = this.filter('fastest'),
slowestName = slowest.pluck('name'),
slowestTime = slowest[0].stats.mean.toFixed(3),
fastestName = fastest.pluck('name'),
fastestTime = fastest[0].stats.mean.toFixed(3),
percentFaster = ((slowestTime/fastestTime)).toFixed(3) * 100,
sampleSize = Benchmark.options.minSamples;
console.log( slowestName + " had a mean time of " + slowestTime + " seconds");
console.log(fastestName + " had a mean time of " + fastestTime + " seconds");
console.log(fastestName + " was " + percentFaster + "% faster than " + slowestName + ".");
}
)
.run({ 'async': true });