Test case details

Preparation Code

<h2>KO's Native Templating Performance Test</h2>         <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>         <h3>Using containerless Template Binding</h3>         <div id="containerlessTemplateBinding">                 <!-- ko template: { name: 'birthDate-template', data: birthDate } --><!-- /ko -->                 <br />                 <!-- ko template: { name: 'anniversaryDate-template', data: anniversaryDate } --><!-- /ko -->                 <br />                 <!-- ko template: { name: 'paroleDate-template', data: paroleDate } --><!-- /ko -->                 <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>         <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
var ViewModel = function() {           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 element, viewModel, viewModel1, viewMode2, viewModel3;         console.log('binding has been set up.');         viewModel = viewModel1 = new ViewModel();     element = document.getElementById("noTemplateBinding");     window.ko.cleanNode(element);     ko.applyBindings(viewModel, element);         //---ACTIVATE KO---     viewModel = viewModel2 = new ViewModel();     element = document.getElementById("yesTemplateBinding")     ko.cleanNode(element);     ko.applyBindings(viewModel, element);         //---ACTIVATE KO---     viewModel = viewModel3 = new ViewModel();     element = document.getElementById("containerlessTemplateBinding");     ko.cleanNode(element);     ko.applyBindings(viewModel, element);

Test cases

Test #1

viewModel1.changeData()

Test #2

viewModel2.changeData()

Test #3

viewModel3.changeData()