在角度渲染和過濾長列表時性能下降

Question

我一直在開發一個角度應用程序，並有一個相當長的列表（1600+行）。當下載列表時，我的應用程序凍結並需要很長時間（+/- 10秒）才能顯示數據。 我不認爲這是正確的，並在互聯網上找到了一些解決方案。但是，這些提示似乎不會影響加載時間。

加載時我看了一下谷歌瀏覽器的開發工具，這給了我這個奇怪的結果：

你可以看到，加載應用程序凍結後花費超過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)); 
} 

的網址只是一個正常的數據庫查詢來獲取行。 還過濾是一團糟。搜索行需要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> 

我真的堅持這個，所以如果任何人都可以幫助我？

Answer 1

我建議按部分分解你的應用程序，直到找到罪魁禍首。

• 我第一次嘗試將完全去除過濾器，看看它如何影響加載時間/冷凍

• 嘗試在頁面上刪除任何其他請求（例如，你正在加載的字體等事）排除任何外部因素。