jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.
jsperf.com URLs are mirrored at the same path, e.g:
https://jsperf.com/negative-modulo/2
Can be accessed at:
https://jsperf.app/negative-modulo/2
The goal is to test Knockout performance (using Native Templating) between: a) not using a template binding b) using a template binding c) using <template>
See: http://knockoutjs.com/documentation/template-binding.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<h2>KO's Native Templating Performance Test</h2>
Testing the performance of binding data when binding directly versus binding through a template binding.
Open the console and call the following:
<ul>
<li><code>viewModel1.changeData()</code></li>
<li><code>viewModel2.changeData()</code></li>
<li><code>viewModel3.changeData()</code></li>
</ul>
<hr />
<h3>Not Using Template Binding</h3>
<div id="noTemplateBinding">
BirthDate: <span data-bind="text: birthDate"></span>
<br />
AnniversaryDate: <span data-bind="text: anniversaryDate"></span>
<br />
ParoleDate: <span data-bind="text: paroleDate"></span>
<br />
</div>
<hr />
<h3>Using Template Binding</h3>
<div id="yesTemplateBinding">
<span data-bind="template: { name: 'birthDate-template', data: birthDate }"></span>
<br />
<span data-bind="template: { name: 'anniversaryDate-template', data: anniversaryDate }"></span>
<br />
<span data-bind="template: { name: 'paroleDate-template', data: paroleDate }"></span>
<br />
</div>
<script type="text/html" id="birthDate-template">
BirthDates:
<span data-bind="text: $data" />
</script>
<script type="text/html" id="anniversaryDate-template">
AnniversaryDate:
<span data-bind="text: $data" />
</script>
<script type="text/html" id="paroleDate-template">
ParoleDate:
<span data-bind="text: $data" />
</script>
<h3>Using Template Tags</h3>
<div id="tags">
<span data-bind="template: { name: 'birthDate-tmpl', data: birthDate }"></span>
<br />
<span data-bind="template: { name: 'anniversaryDate-tmpl', data: anniversaryDate }"></span>
<br />
<span data-bind="template: { name: 'paroleDate-tmpl', data: paroleDate }"></span>
<br />
</div>
<div id="ko-component-32">
<h2>KO 3.2 Component</h2>
<div class="messages" data-bind='component: {name: "listitems",params:$data}'></div>
</div>
<template id="birthDate-tmpl">
BirthDates:
<span data-bind="text: $data" />
</template>
<template id="anniversaryDate-tmpl">
AnniversaryDate:
<span data-bind="text: $data" />
</template>
<template id="paroleDate-tmpl">
ParoleDate:
<span data-bind="text: $data" />
</template>
<script>
var elemInstance = document.getElementById('noTemplateBinding');
ko.components.register('listitems', {
viewModel: function (params) {
// Data: value is either null, 'like', or 'dislike'
this.birthDate = params.birthDate;
this.anniversaryDate = params.anniversaryDate;
this.paroleDate = params.paroleDate;
this.changeData = params.changeData;
},
template: { element: 'noTemplateBinding'},
synchronous: true
});
</script>
function ViewModel() {
var self = this;
//---Properties---
self.birthDate = ko.observable("July 1");
self.anniversaryDate = ko.observable("July 2");
self.paroleDate = ko.observable("July 3");
//---Behavior---
self.changeData = function () {
var now = new Date();
self.birthDate(now.getTime());
self.anniversaryDate(now.getTime());
self.paroleDate(now.getTime());
}
};
//---ACTIVATE KO---
var viewModel1 = new ViewModel();
ko.applyBindings(viewModel1, document.getElementById("noTemplateBinding"));
//---ACTIVATE KO---
var viewModel2 = new ViewModel();
ko.applyBindings(viewModel2, document.getElementById("yesTemplateBinding"));
var viewModel3 = new ViewModel();
ko.applyBindings(viewModel3, document.getElementById("tags"));
var viewModel4 = new ViewModel();
ko.applyBindings(viewModel4, document.getElementById("ko-component-32"));
ko.cleanNode(document.getElementById("noTemplateBinding"));
ko.cleanNode(document.getElementById("yesTemplateBinding"));
ko.cleanNode(document.getElementById("tags"));
ko.cleanNode(document.getElementById("ko-component-32"));
Ready to run.
Test | Ops/sec | |
---|---|---|
No Template Binding |
| ready |
Template Binding |
| ready |
Tags |
| ready |
component |
| ready |
You can edit these tests or add more tests to this page by appending /edit to the URL.