Question

问题简而言之：使用大小为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。但我的应用逻辑不允许这样做。

有什么其他优雅方法可以摆脱这样的问题？分页显然是其中之一。但我感觉它可以以更好的方式处理。

Answer 1

最后，在Marionette Github上发现了很多CollectionView.reset performance问题。很明显，这个问题已经在1.3.x版本的Marionette中得到解决和发布，并且意识到我的应用程序中存在一些错误，而不是Marionette。

对它的进一步调试给了我一个提示，即在获取后为集合中的每个模型调用endBuffering而不是一次。

因此，问题不是reset事件，而是add事件在我的收集级别被触发。后来才知道fetch中有reset选项需要设置。

现在，perf test表示事情快了99％。

Answer 2

使用Backbone和Ember我可以说Ember's Backburner micro-library @ebryn 帮助很多这种反应迟钝的人。作为一个微型库，它可以很好地与Backbone配合使用他们提供simple Backbone example。

骨干牵线木偶复合视图渲染

2 个答案: