骨干模板中的性能问题

情况是我收集了模型，每个模型都有一个名为'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秒，以使所有的复选框“检查”。

我期待它应该至少1秒，如果我使用普通的jQuery。

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

来源

2012-02-29 easycoder

你能后再现上http://jsfiddle.net/的10秒的延迟代码的最小量。一个简单的每个和25个模型的呈现不应该花那么长时间。 – abraham 2012-02-29 19:34:26

为什么不将isSelected设置为true作为模型中的默认值？这样你就不必遍历集合来设置它们中的每一个为真。

来源

2012-02-29 18:35:53 sntran

是的，但它只是一个用例。我也想根据一定的条件来控制复选框。 – easycoder 2012-02-29 19:15:57

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

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

大部分是不是JS就是瓶颈的时间或骨干。这就是说JavaScript正在触发DOM，CSS或重新构成流程，而浏览器正在做太多工作。

我正在为骨干构建一个PerfView。它可以渲染一个包含1,000,000个模型的集合，并且可以在Chrome上以120FPS的速度滚动。代码在Github上：https://github.com/puppybits/BackboneJS-PerfView。这里有很多优化和代码中的注释。其中的技术之一肯定可以解决您的问题。

来源

2013-10-22 04:05:21 puppybits

骨干模板中的性能问题

回答

相关问题