Javascript 在角度视图中渲染和过滤长列表时性能较慢

我一直在开发一个Angle应用程序，有一个相当长的列表（1600多行）。下载列表时，我的应用程序冻结，需要很长时间（+/-10秒）才能显示数据。 我认为这是不对的，我在互联网上找到了一些解决办法。但是，这些提示似乎不会影响加载时间

在加载时，我查看了Google Chrome中的开发工具，这给了我一个奇怪的结果：

您可以看到，加载后应用程序会冻结，需要5秒钟以上的时间才能恢复

我在这里调用的函数如下：

function loadInschrijvingen(activiteit_id, module_id, periode_id, groep_id){
    inschrijvingService.getInschrijvingenById(activiteit_id, module_id, periode_id, groep_id).then(function(response){
        applyInschrijvingen(response);
    });
}

相应的服务功能：

function getInschrijvingenById(activiteit_id, module_id, periode_id, groep_id){
    var request = $http({
    url: API_URL + 'inschrijvingen',
    method: 'GET',
    params: {activiteit_id: activiteit_id, module_id: module_id, periode_id: periode_id, groep_id: groep_id}
        });
   return (request.then(handleSuccess, handleError));
}

url只是用于获取行的普通DB查询。 而且过滤也是一团糟。搜索行需要5秒钟，同时只过滤姓氏

<input type="text" placeholder="zoeken op achternaam" ng-model="inschrijving.achternaam" ng-model-options="{debounce: 500}">


<tr class="fold new" ng-repeat="inschrijving in inschrijvingen | filter: inschrijving  track by inschrijving.id">
    <td>@{{$index+1}}</td>
    <td><span ng-click="toggle('edit', inschrijving.id)"></span></td>
    <td><span ng-click="confirmMail(inschrijving.id)" title="Inschrijvingsmail herzenden"></span></td>
    <td><span ng-click="confirmReminder(inschrijving.id)" title="Betalingsherinnering verzenden"></span></td>
    <td><span ng-click="confirmDelete(inschrijving.id)"></span></td>
    <td>@{{inschrijving.voornaam}} @{{inschrijving.achternaam}}</td>
    <td><a href="mailto:@{{inschrijving.email}}">@{{inschrijving.email}}</a></td>
    <td>@{{inschrijving.geboortedatum | date:'dd/MM/yyyy'}}</td>
    <td><i class="fa" ng-class="{'fa-male': inschrijving.geslacht == 'man', 'fa-female': inschrijving.geslacht == 'vrouw'}"></i></td>
    <td>@{{inschrijving.straat}}, @{{inschrijving.postcode}} @{{inschrijving.gemeente}} </td>
    <td>@{{inschrijving.gsm}}</td>
    <td><input type="checkbox" ng-model="inschrijving.betaald" ng-true-value="1" ng-false-value="0" ng-checked="inschrijving.betaald == 1" ng-change="setState(inschrijving.id, 'postBetaald')"></td>
    <td>
    <select name="betalingswijze" id="betalingswijze" ng-model="inschrijving.betalingswijze" ng-change="setState(inschrijving.id, 'postBetalingswijze')">
        <option value="0" ng-selected="inschrijving.betalingswijze == 0">Geen</option>
        <option value="1" ng-selected="inschrijving.betalingswijze == 1">Cash</option>
        <option value="2" ng-selected="inschrijving.betalingswijze == 2">Overschrijving</option>
    </select>
    </td>
    <td><input class="bedrag" type="text" value="@{{inschrijving.bedrag}}" ng-model="inschrijving.bedrag" ng-change="setState(inschrijving.id, 'postBedrag')" ng-model-options='{ debounce: 1000 }'></td>
    <td><input type="checkbox" ng-model="inschrijving.fotos" ng-true-value="1" ng-false-value="0" ng-checked="inschrijving.fotos == 1" ng-change="setState(inschrijving.id, 'postFotos')"></td>
    <td>
    <select name="tshirtmaat" id="tshirtmaat" ng-model="inschrijving.tshirtmaat" ng-change="setState(inschrijving.id, 'postTshirtmaat')" >
        <option value="" ng-selected="inschrijving.tshirtmaat == ''"></option>
        <option value="92" ng-selected="inschrijving.tshirtmaat == 92">92</option>      
        <option value="L" ng-selected="inschrijving.tshirtmaat == 'L'">L</option>
    </select>
    </td>
    <td>@{{inschrijving.opmerkingen}}</td>
</tr>

@{{$index+1}}
@{{inschrijving.voornaam}}@{{inschrijving.achternaam}
@{{inschrijving.geboortedatam}日期：'dd/MM/yyyy'}
@{{inschrijving.straat}，{{inschrijving.postcode}}{{inschrijving.gemeente}
@{{inschrijving.gsm}
吉恩
现金
过度装饰
92
L
@{{inschrijving.opmerkingen}}

---

我真的被困在这个问题上了，所以如果有人能帮我的话？

我建议你把你的应用程序一部分一部分地分解，直到你找到罪魁祸首

• 我要做的第一件事是完全移除过滤器，看看这会如何影响加载时间/冻结

• 尝试删除页面上的任何其他请求（例如，正在加载的字体等），以排除任何外部因素

---

1600多行需要渲染大量HTML。我将添加分页。使用分页时，行是否以部分方式加载？我来试试这是一种方法是的。另一种方法是将完整的集合返回给客户端，然后查询该数据集。UI引导非常适合于此。我已经尝试过删除字体文件，但是没有成功。我将尝试移除过滤器，看看这会如何影响冻结