主干木偶合成视图渲染 [英] Backbone Marionette Composite View Rendering

问题描述

简而言之，问题是: 在具有约500大小的集合中的木偶中初始化复合视图会使应用停顿一分钟左右.

Problem in short: Initializing a composite view in marionette with a collection of size ~500 stalls the app for around a minute.

我正在构建一个主线木偶应用程序以维护项目列表.当测试的集合大小约为50时，一切都很好.当限制增加时，应用程序将无响应.

I'm building a backbone marionette app to maintain a list of items. When testing with a collection size of ~50 everything is fine. When the limit grows, app goes unresponsive.

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引用在模板方面进行优化.但是没有明显的改善.

I understand it is mainly due to DOM interactions [CPU profiled javascript in the app page]. I tried optimizing on the template side by caching the compiled template's source instead of DOM reference in itemView. But no significant improvement.

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

I thought of using ItemView itself to render the collection as mentioned here. As it appends the final html src to the el. But my logic in application isn't allowing to do so.

还有什么其他优雅的方法可以消除此类问题?分页显然是其中之一..但是我有一种更好的处理方式.

What are other elegant ways to get rid of issues like this? Pagination is obviously one of them.. But I have a feeling that it could be handled in a better way.

推荐答案

最后，经过大量搜索，发现 CollectionView.reset性能问题. 显然，此问题已在Marionette的1.3.x版本中解决并发布，并且意识到我的应用程序中有一些错误而不是Marionette.

Finally after quite a lot of search found CollectionView.reset performance issue on Marionette Github. It is evident that this issue is resolved and released in 1.3.x version of Marionette and realized that there is some bug in my app instead of Marionette.

在同一容器上进行进一步的调试使我得到一个提示，即对集合中的每个模型都调用了endBuffering，而不是在提取之后对所有模型都调用一次.

Further debugging on the same gave me a hint that endBuffering was called for each and every model in the collection instead of once for all after fetch.

因此，问题不是reset事件，而是在我的收藏级别触发了add事件.后来才知道在获取中需要设置 reset 选项.

So, the issue was instead of reset event, add event was getting triggered at my collection level. Later came to know that there is reset option in fetch which needs to be set.

现在，如性能测试所述，事情的执行速度提高了99％.

Now things are 99% faster as the perf test says.

这篇关于主干木偶合成视图渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！