Knockout Computed Observable Patterns

JavaScript performance comparison

Test case created by Erv Walter

Info

Comparison of computed observable functions on each model instance, and two alternatives for having the functions on the prototypes. The javascript used here was actually generated by CoffeeScript.

Test A:

class ModelA
    constructor: (userId) ->
        @userId = ko.observable userId
        @profileUrl = ko.computed =>
            "http://example.com/user/#{@userId()}"

Test B:

class ModelB
    constructor: (userId) ->
        @userId = ko.observable userId
        @profileUrl = ko.computed @computeProfileUrl

    computeProfileUrl: =>
        "http://example.com/user/#{@userId()}"

Test C:

class ModelC
    constructor: (userId) ->
        @userId = ko.observable userId
        @profileUrl = ko.computed @computeProfileUrl, @

    computeProfileUrl: ->
        "http://example.com/user/#{@userId()}"

Preparation code

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js">
</script>
<script>
Benchmark.prototype.setup = function() {
      var ModelA, ModelB, ModelC,
        __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
   
      ModelA = (function() {
   
        function ModelA(userId) {
          var _this = this;
          this.userId = ko.observable(userId);
          this.profileUrl = ko.computed(function() {
            return "http://example.com/user/" + (_this.userId());
          });
        }
   
        return ModelA;
   
      })();
   
      ModelB = (function() {
   
        function ModelB(userId) {
          this.computeProfileUrl = __bind(this.computeProfileUrl, this);
          this.userId = ko.observable(userId);
          this.profileUrl = ko.computed(this.computeProfileUrl);
        }
   
        ModelB.prototype.computeProfileUrl = function() {
          return "http://example.com/user/" + (this.userId());
        };
   
        return ModelB;
   
      })();
   
      ModelC = (function() {
   
        function ModelC(userId) {
          this.userId = ko.observable(userId);
          this.profileUrl = ko.computed(this.computeProfileUrl, this);
        }
   
        ModelC.prototype.computeProfileUrl = function() {
          return "http://example.com/user/" + (this.userId());
        };
   
        return ModelC;
   
      })();
   
};
</script>

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Instance
var model, url;
model = new ModelA(12345);
url = model.profileUrl();
 
pending…
Prototype ('this' by CoffeeScript)
var model, url;
model = new ModelB(12345);
url = model.profileUrl();
 
pending…
Prototype ('this' by Knockout)
var model, url;
model = new ModelC(12345);
url = model.profileUrl();
 
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