javascript - 过渡期间 AngularJS SubForm 的性能

Question

抱歉，这不仅仅是一个编程问题，只是想了解修复为何有效。

我正在使用 Angular-ui 并构建一个表单。完成表单的步骤后，我有一个进行变换的滑动动画。这不一定是问题的一部分，因为我在动画过程中通常会获得 60+ fps。

但是，对于表单的一部分，如果用户有多个子表单元素填写了 ajax 调用，将它们添加到 dom 等就太多了，而且它们的抖动很大。

我通过将 ng-if="isLoaded"应用于 ng-repeated 子表单元素来修复此问题。然后在 ajax 调用完成时设置 $scope.isLoaded = true。

<div ng-repeat="item in employmentHistory" ng-if="isLoaded" ng-form="subForm">

有人可以解释为什么这使得动画的性能如此之高吗？我查看了时间线，看​​起来大部分火焰图都消失了。

我知道 ng-if 不会将元素添加到 DOM，因此这会有所帮助，但即使它在几分之一秒后完成，它似乎也有很大帮助。

谢谢

Answer 1

AFAIR ng-if 的工作方式是，在条件计算为 true 之前，元素不会加载到 DOM 中(或者在条件计算之前将它们从 DOM 中删除)。随着 DOM 大小的大幅减小，您可能会看到性能大幅提升。

引用号:https://docs.angularjs.org/api/ng/directive/ngIf