Javascript CompositeView渲染大型结果集木偶项的速度较慢

我目前正在从事一个项目，该项目在后端使用.NET MVC，在前端使用Marionette JS（v1.8.5），在尝试渲染包含200个结果或项目视图的复合视图时遇到一些性能问题

我第一次遇到它，它帮助我得到了一个新版本的木偶（v1.8.5）

Handlebar模板用于显示一个html表，每个itemView都被包装在一个tbody中（其中有一个更复杂的手风琴视图，因此使用了tbody，而不是一个更具语义的tr）

复合视图正在初始化，并在其子应用程序初始化时显示在木偶区域中

这是我的代码的简化版本

活动子应用程序

'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();

});

我读了报纸

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

我还尝试在fetch success回调中安装activitiesView，如下所示

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

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

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

我错过什么了吗

我做的每件事都在正确的地方吗

我想达到的目标可能实现吗

我觉得很奇怪，这会如此困难

谢谢你抽出时间。 汤姆

编辑

以下是复合视图和项目视图模板

活动组合视图模板

<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>

类型
容器
活动
问询处
审查状态

活动项目视图模板（每个模板都包装在tbody中）

第1列数据
第2列数据
第3列数据
第4列数据
重置集合时将使用缓冲区，因此您可以尝试

activities.fetch({reset: true});

另一个选项是在初始化和显示视图之前等待获取完成（使用延迟/承诺）。
您可以发布模板吗？这应该不会有什么区别，但请尝试
activities.fetch（）.done（function（）{App.RegionActivities.show（module.activitiesView）；}）
谢谢@Meistro，但不幸的是，这没有帮助。我现在使用的是问题中的第二个版本，在这里我执行fetch，然后在成功时实例化视图。Console.logging activiesView实例发生在第二个事件中。问题似乎是在屏幕上呈现集合。主要通过region.show（）发布您的
onShow
函数吗？我不明白为什么调用该函数几百次会给您带来问题（50秒延迟）。你的模板看起来也很简单。我有一个类似的应用程序，可以插入200个项目的列表，但看不到你遇到的性能问题。这个等式中缺少了一些东西。另外，当你深入到配置文件的
triggerMethod
部分时，你得到的是什么函数，这是你自己的代码？@AndrewHubbs我在复合视图或项目视图中没有使用onShow函数。关于devtools配置文件，我将返回给您。我没有注意到MemoryTanks@david sulc中与我自己的代码相关的任何内容，但这并没有起作用。是的，它会在我的复合视图上触发重置事件，但结果仍然需要大约1分钟才能在屏幕上呈现。我将用深入的cpu配置文件更新这个问题。
<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>

<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>

activities.fetch({reset: true});