javascript - 主干 Marionette 复合 View 渲染

Question

问题简而言之:在 marionette 中初始化一个包含大约 500 个大小的集合的复合 View 会使应用程序停止大约一分钟。

我正在构建一个主干 Marionette 应用程序来维护项目列表。当使用 ~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

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

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

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

现在速度比 perf test 快了 99%说。