击倒.js的速度很慢

Knockout.js very slowly foreach

本文关键字：速度 js 击倒      更新时间：2023-09-26

我正在尝试用模板创建一个简单的标记。类似于：

<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后的Knockout会将其添加到文档中。但是，如果我这样做：

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

它工作速度快得多，但不方便。

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

听起来像是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手动处理渲染。您可以更好地控制元素的渲染方式，并且在遇到像现在这样的性能问题时可以尝试不同的方法。

目前最好的解决方案可能是我的快速foreach插件。

它具有O(1)插入和删除等功能，使其速度显著加快（即比您自己轻松完成的速度更快）。

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

相关文章：