6

我正在尝试使用模板创建一个简单的标记。就像是：

<div class="list" data-bind="template: {name: 'mytemplate', data: someData}"></div>

<script id="mytemplate">
  <div class="item" data-bind="text: someText"></div>
</script>

它工作得很好，但是如果我需要用这个模板渲染很多 div，它会很慢。创建每个 div 后的淘汰赛将其添加到文档中。但是，如果我这样做：

el = document.createElement("div");
applyBindings(myModel, el);

(div.list).innerHTML = el.innerHTML

它工作得更快，但不方便。

也许 Knockout 有一些内置功能来创建一组元素，然后将这个组添加到文档中？

4

2 回答 2

6

听起来 KO 正在使用您添加的每个 DIV 操作 DOM。DOM 遍历是昂贵的，并且会减慢页面的渲染速度。在 KO Github 下有一个未解决的问题：https ://github.com/SteveSanderson/knockout/issues/248

在我看来，Knockout 目前还不能胜任处理大型 foreach 数据集的任务。Chrome 上的性能不错（因为 Chrome 很棒），但在 Internet Explorer 上性能很差（在旧版 IE 上更糟）：http: //jsfiddle.net/StarcounterJack/FgSCw/

不要使用 Knockout，而是尝试手动方法：首先在内存中创建 DIV，然后将它们一次全部插入 DOM。这就是您在使用 document.createElement() 的第二个示例中所做的。使用 jQuery，您可以这样做：

var newDiv = $("<div>my new div</div>");
var newDiv2 = $("<div>my new div2</div>");
newDiv.append(newDiv2);
$('body').append(newDiv); //only this last step traverses the DOM

对于模板，我更喜欢使用 Mustache.js，使用 John Resig 的<head><script type="text/templates"> 模板包含技巧加载模板，并通过我自己的 JavaScript 手动处理渲染。您可以更好地控制元素的呈现方式，并且可以在遇到像现在这样的性能问题时尝试不同的方法。

于 2012-08-01T17:52:42.443 回答
3

现在最好的解决方案可能是我的knockout-fast-foreach 插件。

它具有O(1)插入和删除功能，以及其他使其速度特别快的功能（即比您自己轻松完成的速度还要快）。

它是替换 KO 3.5（或 3.6）中当前 foreach 绑定的有力竞争者。

于 2015-11-20T16:19:33.447 回答