骨干木偶复合视图渲染答案

【问题标题】：Backbone Marionette Composite View Rendering骨干木偶复合视图渲染
【发布时间】：2014-04-07 13:55:20
【问题描述】：

简而言之问题：在 marionette 中使用大小为 ~500 的集合初始化复合视图会使应用程序停止大约一分钟。

我正在构建一个骨干木偶应用程序来维护项目列表。当使用 ~50 的集合大小进行测试时，一切都很好。当限制增加时，应用程序将无响应。

Store.ItemsListView = Marionette.CompositeView.extend({
        tagName: "div",
        template: "#items-list",
        itemView: Store.ItemView,
        itemViewContainer: "tbody",
        emptyView: Store.NoDataView,
});

Store.ItemView = Marionette.ItemView.extend({
    tagName: "tr",
    template: "#store-item"
});

我知道这主要是由于 DOM 交互[应用页面中的 CPU 分析 javascript]。我尝试通过缓存已编译模板的源而不是 itemView 中的 DOM 引用来优化模板端。但没有明显改善。

我想到了使用 ItemView 本身来呈现集合，如提到的 here。因为它将最终的 html src 附加到 el.但是我在应用程序中的逻辑不允许这样做。

还有什么其他优雅的方法可以解决此类问题？分页显然是其中之一。但我有一种感觉，它可以以更好的方式处理。

【问题讨论】：

标签： javascript backbone.js marionette backbone-views

【解决方案1】：

同时使用过 Backbone 和 Ember，我可以说是 Ember 的 Backburner micro-library @ebryn 对这种反应迟钝有很大帮助。作为一个微型库，它与 Backbone 配合得很好他们提供simple Backbone example。

【讨论】：

为图书馆 +1 @ebryn :)

【解决方案2】：

经过大量搜索，终于在 Marionette Github 上找到了 CollectionView.reset performance 问题。很明显，这个问题在 Marionette 的 1.3.x 版本中得到解决并发布，并意识到我的应用程序而不是 Marionette 中存在一些错误。

进一步的调试给了我一个提示，即为集合中的每个模型调用 endBuffering，而不是在 fetch 之后一劳永逸。

所以，问题不是reset 事件，而是add 事件在我的收藏级别被触发。后来才知道fetch里面有reset这个选项需要设置。

正如perf test 所说，现在事情的速度提高了 99%。

【讨论】：

我一直在与同样的问题作斗争。完全剥离了我的应用程序，然后偶然发现了这一点。原来该应用程序使用的是 Marionette v1.2。非常感谢！
即使在木偶升级到 1.8.5 并在集合获取时设置 reset:true 后，我仍然遇到性能问题。在此处查看我的 SO 问题：stackoverflow.com/q/25375045/725606。有什么指点吗？