Angular 是一个现代的前端开发框架，它提供了许多方便的指令和组件，使得我们可以快速地搭建出复杂的前端应用。其中，ng-init 指令可以用来初始化一个作用域变量，使其具有一个初始值。
然而，使用 ng-init 有时会导致性能问题，特别是在大型应用中，这个问题可能会非常严重。在本文中，我们将探讨这个问题，并提供解决方案。
问题的根源
ng-init 的本质是在 DOM 元素加载时，立即执行一段 Angular 表达式。这听起来似乎没有问题，但实际上，这个指令的问题在于它会在每个作用域变量上触发一次 Angular 的脏检查。
脏检查是 Angular 中实现数据绑定的机制之一，它的本质是对作用域变量的监视，当变量发生改变时，Angular 会更新相应的 DOM 元素。因此，ng-init 的问题在于它会在每个脏检查周期中都被执行一次，导致了不必要的重复计算和 DOM 更新，从而降低了性能。
解决方案
为了解决这个问题，我们需要避免在每个脏检查周期中都执行 ng-init。下面是两种常见的解决方案：
方案一：使用 ng-if 指令
ng-if 指令与 ng-init 指令的本质类似，它会在 DOM 元素加载时立即执行一段 Angular 表达式，但是它只会在该表达式的值为 true 时才创建 DOM 元素。因此，我们可以使用 ng-if 来代替 ng-init，把需要初始化的作用域变量放在一个新的作用域中，并使用 ng-if 来创建这个作用域。例如：
<div ng-if="init">
<div ng-init="value = 10">{{ value }}</div>
<div ng-init="value = 20">{{ value }}</div>
</div>在这个例子中，我们把两个需要初始化的作用域变量放在一个新的作用域中，并使用 ng-if 来创建这个作用域。这样，ng-init 就只会在这个作用域创建时执行一次，而不是在每个脏检查周期中都执行。
方案二：在控制器中初始化变量
另一个常见的解决方案是在控制器中初始化变量。这样做的好处在于可以避免使用 ng-init，从而降低脏检查的次数。例如：
app.controller('MainController', function($scope) {
$scope.value1 = 10;
$scope.value2 = 20;
});在这个例子中，我们在控制器中初始化变量，从而避免了使用 ng-init。由于变量只需要初始化一次，因此这个方法可以显著地提高性能。
结论
在 Angular 中，ng-init 指令可能会导致性能问题。然而，我们可以通过使用 ng-if 或在控制器中初始化变量来解决这个问题。这些解决方案都具有一定的指导意义，在实际的开发中可以大大提高性能。
示例代码
下面是完整的示例代码，演示了如何使用 ng-if 和在控制器中初始化变量来解决性能问题：
-- -------------------- ---- -------
---- -------------- -------------------------------
---- -------------
---- --------------- - ------ ------ --------
---- --------------- - ------ ------ --------
------
------- ------ - ------ --------
------- ------ - ------ --------
------
--------
--- --- - ----------------------- ----
-------------------------------- ---------------- -
----------- - -----
------------- - ---
------------- - ---
---
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674b5d702358c6a105bf3a4b