在视图模板中执行角度表达式会降低角度应用的性能

Do Angular Expressions in view templates slow down angular app performance

本文关键字：应用 性能 表达式 执行 视图      更新时间：2023-09-26

我的应用程序似乎有很多逻辑的视图。我的问题是双重的：

  1. 视图中的逻辑是否会减慢角度应用的性能？

  2. 作为最佳实践，是否最好在控制器中处理此逻辑并将结果存储在视图可以访问的$scope属性中？这会提高性能吗？

我们应用程序中的视图示例（一个简单的视图）： 

<div class="small-12 column" id="notificationMsg">
    {{ config.message | translate : config.getMessageParams(notification)}}
</div>

简短的回答：是的

长答案：

绑定必须在影响所用变量的每个摘要周期中更新。将值存储在变量中，并且仅在发生更改时才更新它，这将提高您的性能。但是，仅当您达到一定程度的复杂性时，这才至关重要。只要你的应用没有增长太多，这不会是一个威胁 - 现在。

我不一定称其为最佳实践，因为它会使您的代码更复杂，更难阅读/理解/维护。性能并不总是问题。默认情况下，一旦它不存在，它就会开始成为一个;)

你可以做的进一步改进是尽可能使用 ng-bind 和 ng-bind html，因为它可以更快地渲染，因为它可以在编译表达式时跳过 AngularJS 的一些内部步骤。

所以例如使用

<div ng-bind="foo"></div>

而不是 

<div>{{ foo }}</div>

如果可能的话

这些性能考虑背后的关键概念是减少 Angular 内部 $watchers 美元的数量，以提高$digest周期的性能，当您继续使用 Angular 时，您将看到和听到更多。这些对于保持应用程序状态快速和响应用户至关重要。每次更新模型时，无论是通过用户在视图中的输入，还是通过对控制器的服务输入，Angular 都会运行称为$digest周期的东西。

此循环是一个内部执行循环，它贯穿整个应用程序的绑定并检查是否有任何值已更改。如果值已更改，Angular 还将更新模型中的任何值以返回到清晰的内部状态。当我们使用 AngularJS 创建数据绑定时，我们正在创建更多的 $$watchers 和$scope对象，这反过来又需要更长的时间来处理每个$digest。当我们扩展应用程序时，我们需要注意我们创建了多少范围和绑定，因为它们都很快加起来 - 每个范围和绑定都按$digest循环进行检查。

一旦发生更改，Angular 每个$digest周期运行每个过滤器两次。这是一些相当繁重的工作。第一次运行是从 $$watchers 开始检测任何更改，第二次运行是查看是否有需要更新值的进一步更改。

下面是一个 DOM 过滤器的示例，这些是最慢的过滤器类型，预处理我们的数据会快得多。如果可以，请避免使用内联筛选器语法。

{{ filter_expression | filter : expression : comparator }}

Angular 包含一个 $filter 提供程序，您可以使用它在解析到 DOM 之前在 JavaScript 中运行过滤器。这将在将数据发送到视图之前对其进行预处理，从而避免了解析 DOM 和理解内联过滤器语法的步骤。

$filter('filter')(array, expression, comparator);

是的，为了获得更好的性能，请使用 

$scope.description: $translate.instant('DESCRIPTION')

在控制器中，而不是，

{{'DESCRIPTION' | translate }}

此外

这取决于你想要实现什么。这是提高性能的另一种方法。一次性绑定

Angular 1.3 添加了 ：： 符号以允许一次性绑定。总之，Angular 将等待一个值在第一个摘要周期之后稳定下来，并将使用该值来渲染 DOM 元素。之后，Angular 将删除忘记该绑定的观察者。

相关文章：