离子框架中的性能问题

Question

I have created the table with 50 rows and gave the css overflow is scroll to parent element of table. Each time of scrolling I will add 5 row in the table. It's working fine in html. But I converted this to ionic framework, I got performance lag. Can any one suggest, why performance issue is occurring when perform DOM operation in ionic framework?

Answer 1

Remember to use the one-time-binding operator '::' in every angular directive that should execute or evaluate only once, I mean if you don't need to be watching for changes (ng-click, ng-class, ng-if, ng-switch...) and also in labels, texts, fields and stuff filled with your data.

Doing a ng-repeat with too much angular interaction can create a lot of watchers. Hence, the perfomance of your app will decrease dramatically. Imagine an ng-repeat of a portion of html with 1 ng-click, 1 ng-class and three fields. These are 5 watchers, so 5 X 50 rows are 250 watchers ...

Also if your list is not going to change you can use algo :: on the ng-repeat directive. Example:

<div ng-repeat="item in ::ctrl.items"></div>

Answer 2

代替ng-repeat="item in items" ，对于ionic可以使用collection-repeat="item in items 。这是ng-repeat的真正优化版本，适用于ionic。有关更多信息，请查看此链接： collection-repeat in离子的