javascript - CompositeView 为大型结果集 Marionette 呈现项目的速度很慢

Question

我目前正在开发一个项目，该项目在后端使用 .NET MVC，在前端使用 Backbone (v1.1) 和 Marionette JS (v1.8.5)，我在尝试渲染时遇到了一些性能问题具有 200 个结果或项目 View 的复合 View 。

我第一次遇到 this SO post of a similar issue这帮助我获得了更新版本的 Marionette (v1.8.5)。

Handlebars 模板用于显示一个 html 表格，每个 itemView 都包装在一个 tbody 中(其中有一个更复杂的 Accordion View ，因此使用 tbody 而不是更语义化的 tr)

复合 View 在它的子应用程序初始化时被初始化并显示在 Marionette 区域中。

这是我的代码的简化版本。

Activities 子应用

'use strict';

App.module('Activities', function(){
    this.startWithParent = false;
});

App.addRegions({
    RegionActivities: '#region-Activities' // <= this lives in .NET View of project
});

App.Activities.addInitializer(function (options) {

    var module = this,
        activities = new Collections.Activities();

    module.activitiesView = new Views.ActivitiesView({
        collection: activities
    });

    App.RegionActivities.show(module.activitiesView);

    activities.fetch();

});

事件复合 View

'use strict';

Views.ActivitiesView = Backbone.Marionette.CompositeView.extend({

    template: Handlebars.templates['activities/activities'],

    itemView: Views.ActivityView,

    itemViewContainer: '.admin-table--activities', // <= html table that items are appended to

});

事件项目 View

'use strict';

Views.ActivityView = Backbone.Marionette.ItemView.extend({

    template: Handlebars.templates['activities/activity'],

    tagName: 'tbody'

});

我读了Marionette Docs on the better performing doc fragment

因此，我遇到的性能问题是所有 200 个项目一次被附加一个，而不是使用 docFragment 缓冲区。通过调试，我相信这是因为在获取之前 View 是用一个空的 Activities 集合实例化的，所以 Marionette 认为我正在更新集合并将 isBuffering 设置为 false。

我也试过像这样在获取成功回调中实例化 activitiesView；

activities.fetch({
    success: function(newCollection) {
        module.activitiesView = new Views.ActivitiesView({
            collection: newCollection
        });

        App.RegionActivities.show(module.activitiesView);
    }
});

这确实将 200 个项目附加到集合 elBuffer(大约需要 4 秒)，但是在屏幕上显示任何内容之前又需要 50 秒左右。调试表明，由集合触发的 onShow 方法可能会导致此延迟，因为它逐项循环遍历每个项目。

我错过了什么吗？

我是否在正确的地方做每件事？

我想要实现的目标是否可行？

我觉得这太难了。

谢谢你的时间。汤姆

编辑

这里有复合 View 和项目 View 模板。

事件复合 View 模板

<table class="admin-table admin-table--accordion admin-table--activities">

    <colgroup>
        <col width="10%">
        <col width="22%">
        <col width="23%">
        <col width="23%">
        <col width="22%">
    </colgroup>

    <thead>
        <tr>
            <th>Type</th>
            <th>Vessel</th>
            <th>Activity</th>
            <th>Information</th>
            <th>Review Status</th>
        </tr>
    </thead>

</table>

Activity ItemView 模板(每个包裹在 tbody 中)

<tr class="table-title">
    <td>Col 1 data</td>
    <td>Col 2 data</td>
    <td>Col 3 data</td>
    <td>Col 4 data</td>
    <td Col 5 data</td>
</tr>

<tr class="table-content">
    <td colspan="5">More info in here...</td>
</tr>

更新

chrome 开发工具 javascript CPU 配置文件的结果:

Top 3项均指Marionette triggerMethod占用80% CPU。

全尺寸图片位于:http://i.stack.imgur.com/JjT3Z.png

Answer 1

重置集合时会使用缓冲区，所以你可以试试

activities.fetch({reset: true});

另一种选择是等到获取完成(使用延迟/ promise )，然后再初始化和显示您的 View 。