离子框架中的性能问题答案

【问题标题】：Performance issue in ionic framework离子框架中的性能问题
【发布时间】：2016-09-22 11:27:55
【问题描述】：

我创建了一个有 50 行的表，并且 css 溢出是滚动到表的父元素。每次滚动我都会在表格中添加 5 行。它在 html 中运行良好。但是我将它转换为离子框架，我得到了性能滞后。任何人都可以建议，为什么在离子框架中执行 DOM 操作时会出现性能问题？

【问题讨论】：

尽量只使用离子组件，因为它们已针对移动环境进行了优化。渲染问题在移动混合应用程序中很常见，它不是离子故障，而是构建在应用程序浏览器中。接下来是 angularJs 做了很多 DOM 操作，所以从典型的 DOM 修改更改为 angular 会造成明显的性能问题。

标签： angularjs ionic-framework

【解决方案1】：

请记住在每个只应执行或评估一次的角度指令中使用 一次性绑定运算符 '::'，我的意思是如果您不需要监视更改（ ng-click、ng-class、ng-if、ng-switch...）以及标签、文本、字段和填充数据的内容。

使用过多的角度交互进行 ng-repeat 会产生大量的观察者。因此，您的应用程序的性能将急剧下降。想象一下 html 的一部分的 ng-repeat，其中包含 1 ng-click、1 ng-class 和三个字段。这些是 5 个观察者，所以 5 X 50 行是 250 个观察者...

此外，如果您的列表不会更改，您可以在 ng-repeat 指令上使用算法 ::。示例：

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

【讨论】：

【解决方案2】：

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

【讨论】：