[英]Slow performance when rendering and filtering long list in Angular
I've been developing an angular application and have a fairly long list (1600+ rows). 我一直在开发一个角度应用程序,并且有一个相当长的列表(1600多行)。 When downloading the list, my application freezes and takes a really long time (+/- 10 seconds) to display the data. 下载列表时,我的应用程序冻结,并且花费很长时间(+/- 10秒)来显示数据。 I don't think this is right and have found some solutions on the internet. 我认为这不对,并已在互联网上找到了一些解决方案。 These tips however don't seem to affect the loading time. 但是,这些技巧似乎并不影响加载时间。
While loading I had a look at the dev-tools in Google Chrome, which gave me this strange result: 加载时,我查看了Google Chrome浏览器中的开发工具,这给了我一个奇怪的结果:
You can see that after loading the application freezes and takes more than 5 seconds to recover. 您会看到加载后应用程序冻结,并且需要5秒钟以上的时间才能恢复。
the function I call here is the following: 我在这里调用的函数如下:
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);
});
}
the corresponding service function: 相应的服务功能:
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));
}
the url is just a normal DB query to fetch the rows. 网址只是获取行的常规数据库查询。 Also filtering is a mess. 过滤也是一团糟。 It takes 5 seconds to search the rows, while only filtering the last name. 搜索行需要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>
I'm really stuck with this, so if anyone could help me out? 我真的很坚持,所以如果有人可以帮助我吗?
I would suggest breaking down your application part by part, until you find the culprit. 我建议您逐一分解您的应用程序,直到找到罪魁祸首。
My first thing to try would be to remove the filter completely and see how that affects the load times/freezing 我要尝试的第一件事是完全移除过滤器,看看它如何影响加载时间/冻结
Try removing any other requests on the page (eg the fonts you are loading etc) to rule out any external factors. 尝试删除页面上的任何其他请求(例如,正在加载的字体等)以排除任何外部因素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.