data-bind cache in Knockout.js

JavaScript performance comparison

Revision 17 of this test case created

Preparation code

<div id="main" style="display: none" data-bind="template: 'repeat'">
</div>
<script id="repeat" type="text/html">
  < table > < tr data - bind = "repeat: { foreach: rows, item: '$row' }" > < td data - bind = "repeat: { foreach: $row().cells, item: '$cell', bind: 'text: \'Cell \' + $cell().id()'}" > < /td>
        </tr > < /table>
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js">
</script>
<script type='text/javascript' src="https://raw.github.com/mbest/knockout-repeat/master/knockout-repeat.js">
</script>
<script>
  function Cell(id) {
    this.id = ko.observable(id);
  }

  function Row(id) {
    this.id = ko.observable(id);
    this.cells = ko.observableArray();
  }

  var viewModel = {
    rows: ko.observableArray()
  };

  for (var i = 0; i < 1000; i++) {
    var row = new Row(i);

    for (var j = 0; j < 200; j++) {
      row.cells.push(new Cell(i + " - " + j));
    }
    viewModel.rows.push(row);
  }

  ko.utils.buildEvalFunction = function(expression, scopeLevels) {
    // Build the source for a function that evaluates "expression"
    // For each scope variable, add an extra level of "with" nesting
    // Example result: with(sc[1]) { with(sc[0]) { return (expression) } }
    var functionBody = "return (" + expression + ")";
    for (var i = 0; i < scopeLevels; i++) {
      functionBody = "with(sc[" + i + "]) { " + functionBody + " } ";
    }
    return new Function("sc", functionBody);
  };


  ko.bindingProvider['instance'].bindingCache = {};
  var withoutcache = ko.bindingProvider['instance'].parseBindingsString;
  var withcache = function(bindingsString, bindingContext) {
      try {
        var viewModel = bindingContext['$data'];
        var scopes = (typeof viewModel == 'object' && viewModel != null) ? [viewModel, bindingContext] : [bindingContext];
        var cacheKey = scopes.length + '_' + bindingsString;
        var bindingFunction;
        if (cacheKey in this.bindingCache) {
          bindingFunction = this.bindingCache[cacheKey];
        } else {
          var rewrittenBindings = " { " + ko.jsonExpressionRewriting.insertPropertyAccessorsIntoJson(bindingsString) + " } ";
          bindingFunction = this.bindingCache[cacheKey] = ko.utils.buildEvalFunction(rewrittenBindings, scopes.length);
        }
        return bindingFunction(scopes);
      } catch (ex) {
        throw new Error("Unable to parse bindings.\nMessage: " + ex + ";\nBindings value: " + bindingsString);
      }
      };
</script>
<script>
Benchmark.prototype.setup = function() {
    ko.utils.emptyDomNode($("#main")[0]);
    ko.bindingProvider['instance'].bindingCache = {};
};
</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
with cache
ko.bindingProvider['instance'].parseBindingsString = withcache;

var main = $("#main");
ko.applyBindings(viewModel, main[0]);
pending…
without cache
ko.bindingProvider['instance'].parseBindingsString = withoutcache;

var main = $("#main");
ko.applyBindings(viewModel, main[0]);
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