AngularJS 是一个广泛应用于构建单页面 Web 应用程序的前端框架。但是，随着应用程序变得越来越复杂，性能问题也变得越来越突出。在这篇文章中，我们将针对初学者介绍一些 AngularJS 性能优化技巧，帮助您更好的理解和掌握 AngularJS。
减少双向数据绑定
双向数据绑定是 AngularJS 最强大的特性之一，但也是性能问题的罪魁之一。每当数据模型发生变化时，AngularJS 都会遍历所有绑定该数据的 DOM 元素，并使用 Digest 轮询算法来更新它们。这个过程对于大型应用来说非常缓慢，因此我们需要尽可能减少双向数据绑定的数量。
例如，我们可以使用单向数据绑定代替双向数据绑定。
-- ------ ------ ------------------- -- -- ------ ------- -------- --------
使用一次性绑定
AngularJS 2 中引入了与一次性绑定相关的 "OnPush" 策略，它允许 AngularJS 最小化视图更新，减轻轮询算法的负担。在 AngularJS 1 中，我们也可以使用一次性绑定技术来优化性能。
-- ----- ------- ---------- --------
这里使用 :: 操作符告诉 AngularJS 这个绑定只需要被执行一次。
避免使用过多的 DOM 操作
渲染 DOM 是任何前端应用程序的瓶颈之一。因此，我们需要尽量避免在页面中频繁进行 DOM 操作。在 AngularJS 中，可以使用指令或 ng-repeat 等内置指令来避免重复操作 DOM。
使用 track by 优化 ng-repeat
ng-repeat 指令是 AngularJS 最常用的指令之一，遍历循环列表并生成相应视图。如果列表中的元素发生变化，AngularJS 会重复遍历并更新所有相关视图。这个过程对性能的消耗非常大。
为了最小化这种消耗，我们可以使用 track by 这个选项。例如，如果您知道列表中的元素是唯一的，并且它们具有唯一的 ID，则可以使用以下方式指定 track by 选项：
---- --------------- -- ----- ----- -- ----------- --------- --------
这将使 AngularJS 跟踪列表中每个元素的 ID，而不是整个对象本身。
编写高效的控制器
AngularJS 中的控制器是连接视图和模型的桥梁，也是业务逻辑和数据的主要来源。因此，编写高效的控制器非常重要。
首先，要避免在控制器中使用太多的过滤器。这些过滤器每个都会启动一个新的 $watcher，并在模型发生变化时触发 Digest。
其次，只需要在必要时注入依赖项。一旦您知道您控制器所需的依赖项，那么就没有必要注入更多的依赖项。
尽可能使用 ng-if
ng-if 指令与 ng-show 和 ng-hide 指令功能相似，但是它提供了更强大的功能。当使用 ng-if 时，AngularJS 会对其进行评估，并仅在数据条件为 true 时才创建元素。这减少了应用程序启动时的 DOM 渲染成本。
---- ----------------------------------------
将所有 CSS 放在头部
CSS 样式表对于我们的应用程序非常重要，它决定了应用程序的外观和界面。将 CSS 样式表放在头部可以帮助浏览器提前渲染未来的元素。这意味着，当您的应用程序页面加载时，浏览器已经可以提前渲染好样式，提高了用户体验。
使用 $watchCollection 进行模型监听
当我们在模型中的数组或对象上添加或删除元素时，AngularJS 会执行一个子级 $watcher 来检测模型的变化，这对性能有很大的影响。
使用 $watchCollection 可以避免这个问题。$watchCollection 可以轻松监听数组或对象的添加或删除操作。
------------ - --- -------------------------------- ---------------- ------- - -- -- --------- ---- --- ---------- -------- ---
使用 AngularJS 内置模块
AngularJS 拥有各种功能强大的内置模块，可以帮助我们构建高效且符合标准的应用程序。这些模块包括 ng-animate、ng-storage 和 ng-resource 等。在编写代码时，尽可能使用内置模块，这将有助于您编写更好、更优化的代码。
结论
在本文中，我们介绍了一些初学者的 AngularJS 性能优化技巧，希望您能根据这些技巧来编写更好、更优化的代码。虽然每个应用程序都是独特的，但是通过避免不必要的 DOM 操作、减少绑定量、使用 ng-if 和 $watchCollection 等技术，以及优化控制器等措施，您可以轻松提高应用程序的性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6720729f2e7021665e0242e8