[英]Slow performance when rendering and filtering long list in Angular
我一直在開發一個角度應用程序,並且有一個相當長的列表(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));
}
網址只是獲取行的常規數據庫查詢。 過濾也是一團糟。 搜索行需要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>
我真的很堅持,所以如果有人可以幫助我嗎?
我建議您逐一分解您的應用程序,直到找到罪魁禍首。
我要嘗試的第一件事是完全移除過濾器,看看它如何影響加載時間/凍結
嘗試刪除頁面上的任何其他請求(例如,正在加載的字體等)以排除任何外部因素。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.