Knockout Template Binding Performance (v12)

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

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


<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/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" ) );
    
    var viewModel3 = new ViewModel(); 
    ko.applyBindings( viewModel3, document.getElementById( "tags" ) );

Test runner

Ready to run.

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

Revisions

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