Knockout Template Binding Performance (v13)

Revision 13 of this benchmark created on

Description

The goal is to test Knockout performance (using Native Templating) between:

  • not using a template binding
  • using a template binding with a <script> tag
  • using a template binding with a <template> tag

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 Script Tag Binding</h3>
        <div id="scriptTagBinding">
                <!-- 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>

        <h3>Using Template Tag Binding</h3>
        <div id="templateTagBinding">
                <!-- ko template: { name: 'birthDate-tmpl', data: birthDate } -->
    <!-- /ko -->
                <br />
                <!-- ko template: { name: 'anniversaryDate-tmpl', data: anniversaryDate } -->
    <!-- /ko -->
                <br />
                <!-- ko template: { name: 'paroleDate-tmpl', data: paroleDate } -->
    <!-- /ko -->
                <br />
        </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 type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.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() );
        }
    
    };
    
    window.alr = false;
    if (window.alr) return;
    
    //---ACTIVATE KO---
    var viewModel1 = new ViewModel(); 
    ko.applyBindings( viewModel1, document.getElementById(  "noTemplateBinding" ) );
    
    //---ACTIVATE KO---
    var viewModel2 = new ViewModel(); 
    ko.applyBindings( viewModel2, document.getElementById( "scriptTagBinding" ) );
    
    //---ACTIVATE KO---
    var viewModel3 = new ViewModel(); 
    ko.applyBindings( viewModel3, document.getElementById( "templateTagBinding" ) );
    
    window.alr = true;

Test runner

Ready to run.

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

Revisions

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