knockout.js - 如何计时 knockoutjs 更新？

Question

我正在使用带有延迟更新插件的 knockoutjs 2.2。我通过 Ajax 从服务器加载大量数据，并用它来实例化一堆对象（比如大约 5K 个对象，每个对象都有六个属性），其中一些然后以 HTML 呈现。整个过程需要 10-20 秒，但我不确定时间都去哪儿了，也不知道淘汰赛是否在做不应该做的额外工作。

JSON结构的传递和创建比较快；我添加了计时调用来衡量从 JSON 数据创建数据图的过程。我现在想做的是测量 knockoutJS 计算ko.computed值和应用绑定所需的时间。我怎么做？是什么触发了更新（在填充视图模型时已被推迟），我如何将它括起来以测量它花了多长时间？

Answer 1

您可以创建一个记录时间的自定义绑定。这是一个例子：http: //jsfiddle.net/mbest/WTYhs/

var startTime = new Date().getTime();
ko.bindingHandlers.logTime = {
  reset: function() {
    startTime = new Date().getTime();
  },
  init: function(element, valueAccessor) {
    var value = valueAccessor();
    console.log(value.msg + ' init: ' + (new Date().getTime() - startTime) + ' ms');
  },
  update: function(element, valueAccessor) {
    var value = valueAccessor();
    if (typeof value.track == 'function')
      value.track();
    console.log(value.msg + ' update: ' + (new Date().getTime() - startTime) + ' ms');
  }
};