很多主干视图 - 性能问题？答案

【问题标题】：lots of backbone views - performance issues?很多主干视图 - 性能问题？
【发布时间】：2012-07-31 16:18:33
【问题描述】：

tl;dr：我想知道有很多（目前 100 多个，可能高达 1000/2000 或更多）主干视图（作为表格的一个单元格）是否太重或没有

我正在进行的项目围绕着规划视图展开。每个用户有一行，覆盖一天 6 小时，每个小时分为 4 个 1500 万个插槽。此计划用于在单击插槽时添加“预订”，并且应该处理正确插槽的悬停，以及在无法进行预订时处理 - 即。防止用户点击“不可用”插槽。

一个slot不能点击的原因有很多：用户此时不可用，或者用户处于预约状态；或者应用程序需要在两个预订之间“强制”一个延迟槽。保留（一个 div）在一个槽（表格的一个单元格）中呈现，并通过玩弄尺寸，悬停正确数量的槽。

所有这些屏幕都由主干处理。所以对于我悬停的每个插槽，我需要检查我是否可以在这里进行预订。到目前为止，我通过玩弄插槽上的data 属性来使用它：添加预留对象时，所覆盖的插槽“通过预留对象（主干视图对象）（以及其他）增强。

但在某些情况下，我现在不太了解，它混淆了，当保留视图被删除时，插槽没有“清理”：以前的 class 没有正确重置。这可能是我做错了或做得不好，但这只会变得更重；我想我应该在这里使用另一类 Backbone 视图，但我担心槽数和视图对象的数量会很高并导致性能问题。我对 js 性能一无所知，所以我想在上火车之前得到一些反馈。任何其他关于如何做到这一点的建议也将受到欢迎。

感谢您的宝贵时间。如果这还不够清楚，请告诉我，我会尝试改写它。

【问题讨论】：

你可以test it 看看...
我会这样做，但我们已经落后于这个项目的计划。如果没有用或适得其反，我不想在这上面浪费时间
当你删除视图时，你是在破坏它吗？
无论如何都没有明确表示。我使用Backbone.View.remove，一旦我不再使用它，就不应该有任何对该对象的引用。但我承认我不知道 js 中是如何管理内存的，除了使用console.log 和设置断点之外，我对调试 js 了解不多。

标签： javascript backbone.js

【解决方案1】：

我们有一个相当复杂的backbone.js 应用程序，在给定时间可能有数千个视图。我们的瓶颈主要在于未正确删除的视图的内存泄漏或不必要地重新渲染视图的事件驱动渲染。也就是说，实际观看次数似乎并没有太大影响。主干视图非常轻量级，所以只要您没有绑定太多事件，这不是什么大问题。

您可能会遇到性能问题，但视图可能不是问题。

如果您确实使用了数千个视图，您可能想要做的是将初始渲染隐藏到一个大的“.html()”调用中。为此，您可以根据视图的 cid 为每个视图元素提供一个 id，然后连接视图的 html 字符串，然后在每个视图上使用 setElement 再次找到它的元素。

【讨论】：

【解决方案2】：

也许这会有所帮助：
https://stackoverflow.com/a/7150279/1067061

btw.: 我喜欢你的头像 ;)

【讨论】：

这应该是一条评论。

【解决方案3】：

backbone 处理一切是浏览器性能最低的方式。如果速度不够快，您需要停止创建和销毁模板。缓存模板几乎没有任何帮助。

不要调用渲染函数，而是将一个变量保存到 jquery 选择器中，当模型更改时，使用缓存的选择器来更新 DOM。这将为您带来最大的性能飞跃。

$title = null,
init = function(){ $title = this.$el.find('h1'); },
onTitleChange = function(event){ $title.html(event.value) }

我正在开发一个高性能的主干视图。它可以以超过 120FPS 的速度渲染包含 1,000,000 个模型的集合。代码在 Github 上。 https://github.com/puppybits/BackboneJS-PerfView 还有很多其他的优化可以做。如果您查看 PrefView，它在大多数优化方面都有 cmets。

【讨论】：