Knockout.js vs Direct DOM Manipulation

JavaScript performance comparison

Test case created by Hallvar Helleseth

Preparation code

<div id="test">
    <ul id="knockout" data-bind="foreach: jokes">
        <li data-bind="text: joke"/>
    </ul>

    <ul id="dom">
    </ul>
</div>

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script>
  Benchmark.prototype.setup = function() {
    // Reset DOM
    var el = document.getElementById('test');
    el.outerHTML = '<div id="test"><ul id="knockout" data-bind="foreach: jokes"><li data-bind="text: joke"/></ul><ul id="dom"></ul></div>';
    
    var jokes = [{joke:"How many programmers does it take to change a light bulb? None – It’s a hardware problem"},
                 {joke:"Programming is like sex: One mistake and you have to support it for the rest of your life."},
                 {joke:"There are three kinds of lies: Dark Lies, white lies, and benchmarks."}];
    
    function ViewModel() {
        this.jokes = jokes;
    }
  };
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Knockout.js
 
// Reset DOM
var el = document.getElementById('test');
el.outerHTML = '<div id="test"><ul id="knockout" data-bind="foreach: jokes"><li data-bind="text: joke"/></ul><ul id="dom"></ul></div>';
el = document.getElementById('knockout');

// Run knockout
ko.applyBindings(new ViewModel(), document.getElementById('knockout'));
 pending…
Direct DOM Manipulation
 
// Reset DOM
var el = document.getElementById('test');
el.outerHTML = '<div id="test"><ul id="knockout" data-bind="foreach: jokes"><li data-bind="text: joke"/></ul><ul id="dom"></ul></div>';
el = document.getElementById('dom');

// Manipulate DOM
for(var i in jokes) {
    var li = document.createElement('li');
    li.appendChild(document.createTextNode(jokes[i].joke));
    el.appendChild(li);
}
 pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment