Question

我遇到骨干模板的性能问题。

情况是我收集了模型，每个模型都有一个名为'isSelected'的字段。

我需要使用每个模型的模板渲染此集合。 'isSelected'字段用于设置模板中的复选框。

为了便于讨论，模板如下。

<div class='thumbnail'>
  <input class='checkbox' type='checkbox' {[ if (isSelected) { ]} checked='checked'{[ } ]}
</div>

当我需要选中所有复选框时，我会将集合中每个模型的字段更新为true。

我使用的代码是

this.collection.each(function(e) {
    e.set("isSelected", true);
});

但是，这种方式非常慢，因为一个集合包含25个项目，所有复选框都“检查”将花费将近10秒。

如果我使用普通的jquery，我预计它应该至少1秒。

这种方法有问题吗？这种问题的最佳方法是什么？

Answer 1

为什么不在模型中将isSelected设置为true作为默认设置？这样您就不必循环遍历集合以将它们设置为true。

Answer 2

很难说出你所发布的代码量占用了所有处理时间。我的第一个猜测是渲染函数被多次调用。创建和销毁模板会导致性能下降。如果您发布更多代码，可能很容易发现任何问题区域。

您应该渲染可能需要的所有HTML节点。在渲染它们之后保存一个jquery选择器并使用它来切换所选的。

大多数情况下，JS或Backbone不是瓶颈。这是因为JavaScript正在触发DOM，CSS或者回流，并且浏览器正在做太多的工作。

我正在为骨干网建立一个PerfView。它可以渲染一个拥有1,000,000个模型的集合，并在chrome上以120FPS滚动。代码在Github上：https://github.com/puppybits/BackboneJS-PerfView。代码中有很多优化和注释。其中一种技术肯定会解决您的问题。

骨干模板中的性能问题

2 个答案: