Foreach 和 Template 绑定在淘汰赛中的表现答案

【问题标题】：Performance of Foreach and Template binding in knockoutForeach 和 Template 绑定在淘汰赛中的表现
【发布时间】：2014-12-31 09:21:01
【问题描述】：

一直在研究 foreach 和模板绑定的性能问题。在我们的单页应用程序中，我们嵌套了 foreach/templates。下面是 jsperf url，它给出了一个没有 foreach 和一个有 foreach 的普通数组的信息；其中标题为“扩展循环标记”的测试优于“嵌套 foreach”绑定。还观察到，嵌套和展开的相应“foreach via template”测试比没有 foreach via template 的测试耗时。

jsperf 网址： http://jsperf.com/knockout-nested-foreach-vs-expanded-markup/2

感谢您对淘汰赛 3.1.0 性能的帮助

淘汰赛 3.2 版本也存在性能问题。

想知道如何使用嵌套的 foreach 和/或模板绑定来减少加载时间。

【问题讨论】：

你有什么问题？
@HansRoerdinkholder - 我在帖子中添加了问题。
当您加载大数据表时，嵌套的 foreach/模板绑定通常太慢。在这种情况下，我通常使用低级 JavaScript 创建一个自定义绑定来呈现 DOM：创建一个大的 HTML 字符串，将其附加到一个分离的节点并将其插入到 DOM 中。我不知道有什么方法可以让绑定本身更快。
在我的淘汰赛经验中，汉斯是绝对正确的。

标签： performance templates knockout.js foreach nested

【解决方案1】：

根据 Hans 的概述，如果您真的希望从客户端中获得最大的性能。直接与集合一起使用的自定义绑定，将 HTML 构建为字符串并使用 element.innerHTML 之类的东西注入它。

下面是一个简单的example：

ko.bindingHandlers.innerHtml = {
  init: function (element, valueAccessor) {
    var lst = ko.unwrap(valueAccessor());

    if (lst) {
      var html = '';

      for (var i = 0; i < lst.length; i++) {
        html += '<li>' + lst[i] + '</li>';
      }

      if (html)
        element.innerHTML = html;
    }
  }
};
    
var vm = function(){
  var self = this;
  self.lst = ko.observableArray();

  for (var i = 0; i < 100; i++) {
    var ary = [];
    for (var j = 0; j < 1000; j++)
    {
      ary.push(j)
    }

    self.lst.push({ num: i, numAry: ary});
  }

};

ko.applyBindings(new vm());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: $data.lst">
  <li>  
    <span data-bind="text: num"></span>
    <ul data-bind="innerHtml: numAry"></ul>
  </li>
</ul>

【讨论】：