Knockout Template Binding Performance (v3)

Revision 3 of this benchmark created 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">
                <!-- 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.0/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 viewModel1 = new ViewModel(); 
    ko.applyBindings( viewModel1, document.getElementById(  "noTemplateBinding" ) );
    
    //---ACTIVATE KO---
    var viewModel2 = new ViewModel(); 
    ko.applyBindings( viewModel2, document.getElementById( "yesTemplateBinding" ) );

Test runner

Ready to run.

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

Revisions

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