Knockout Template Binding Performance (v3.0.0) (v9)

Revision 9 of this benchmark created by Rhett on

Description

The goal is to test Knockout performance (using Native Templating) between: <ul> <li>not using a template binding</li> <li>using a template binding</li> </ul>

See: http://knockoutjs.com/documentation/template-binding.html

Preparation HTML

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

Setup

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 runner

Ready to run.

Testing in
TestOps/sec
No Template Binding
viewModel1.changeData()
ready
Template Binding
viewModel2.changeData()
ready
Containerless Template Binding
viewModel3.changeData()
ready

Revisions

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