Knockout Template Binding Performance (v17)

Revision 17 of this benchmark created on

Description

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

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

Setup

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"));

Teardown


    ko.cleanNode(document.getElementById("noTemplateBinding"));
    ko.cleanNode(document.getElementById("yesTemplateBinding"));
    ko.cleanNode(document.getElementById("tags"));
    ko.cleanNode(document.getElementById("ko-component-32"));

Test runner

Ready to run.

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

Revisions

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