My app seems to have views with a lot of logic in them. My question is two fold:
我的应用程序似乎有很多逻辑的视图。我的问题有两方面:
-
Does logic in the view slow down angular app performance?
视图中的逻辑会减慢角应用程序的性能吗?
-
As a best practice, is it better to treat this logic in the controller and just store the outcome in a $scope attribute which the view can access ? Would this improve performance ?
作为一种最佳实践，是否最好在控制器中处理此逻辑，并将结果存储在视图可以访问的$scope属性中?这会提高性能吗?
Example of views in our app (a simple one):
我们app中的视图示例(一个简单的例子):
<div class="small-12 column" id="notificationMsg">
{{ config.message | translate : config.getMessageParams(notification)}}
</div>
2 个解决方案
#1
3
short answer: yes
简短的回答:是的
long answer:
长一点的回答:
your bindings will have to be updated in every digest cycle which affects the used variables. storing the value in a variable and only updating it if something changes will improve your performance. however this will only be critical if you reach a certain amount of complexity. as long as your app doesn't grow too much this won't be a threat to think about - yet.
必须在每个影响使用的变量的摘要周期中更新绑定。将值存储在变量中，只有在发生更改时才进行更新，这将提高性能。然而，只有当您达到一定程度的复杂性时，这才是至关重要的。只要你的应用不长太多，这就不会对你构成威胁。
i wouldn't necessarily call it a best practice, because it can make your code more complex and harder to read/understand/maintain. performance isn't always an issue. it just starts to be one as soon as it's absent by default ;)
我不认为这是最佳实践，因为它可以使您的代码更复杂、更难读/理解/维护。性能并不总是一个问题。默认情况下不存在时，它就开始为1;
a further improvement you can do is use ng-bind and ng-bind html instead whenever possible, because it can be rendered faster, since it can skip some internal steps of angularJS whilst compiling the expression.
您可以做的进一步改进是尽可能使用ng-bind和ng-bind html，因为它可以更快地呈现，因为它可以在编译表达式时跳过angularJS的一些内部步骤。
so e.g. use
所以如使用
<div ng-bind="foo"></div>
instead of
而不是
<div>{{ foo }}</div>
if possible
如果可能的话
#2
0
The key concept behind these performance considerations is reducing the number of $$watchers inside Angular to improve the $digest cycle’s performance, something you’ll see and hear more of as you continue working with Angular. These are crucial to keeping our application state fast and responsive for the user. Each time a Model is updated, either through user input in the View, or via service input to the Controller, Angular runs something called a $digest cycle.
这些性能考虑背后的关键概念是减少$ observer的数量，以提高$digest循环的性能，随着您继续使用该循环，您将会看到和听到更多。这些对于保持我们的应用程序状态快速和响应用户非常重要。每次模型更新时，无论是通过视图中的用户输入，还是通过对控制器的服务输入，角都运行一个称为$digest循环的东西。
This cycle is an internal execution loop that runs through your entire application’s bindings and checks if any values have changed. If values have changed, Angular will also update any values in the Model to return to a clear internal state. When we create data-bindings with AngularJS, we’re creating more $$watchers and $scope Objects, which in turn will take longer to process on each $digest. As we scale our applications, we need to be mindful of how many scopes and bindings we create, as these all add up quickly - each one being checked per $digest loop.
这个循环是一个内部执行循环，在整个应用程序的绑定中运行，并检查是否有任何值发生了更改。如果值发生了变化，那么angle也会更新模型中的任何值，以返回一个清晰的内部状态。当我们使用AngularJS创建数据绑定时，我们创建了更多的$watchers和$scope对象，反过来，每个$digest将需要更长的时间来处理。当我们扩展我们的应用程序时，我们需要注意我们创建了多少范围和绑定，因为这些都是快速相加的——每个$digest循环检查每个范围和绑定。
Angular runs every single filter twice per $digest cycle once something has changed. This is some pretty heavy lifting. The first run is from the $$watchers detecting any changes, the second run is to see if there are further changes that need updated values.
角每一个过滤器每$摘要周期运行两次，一旦发生变化。这是相当沉重的负担。第一次是$watchers检测任何更改时的第一次，第二次是查看是否有进一步的更改需要更新值。
Here’s an example of a DOM filter, these are the slowest type of filter, preprocessing our data would be much faster. If you can, avoid the inline filter syntax.
这是一个DOM过滤器的例子，这些是最慢的过滤器类型，预处理我们的数据要快得多。如果可以，避免使用内联过滤器语法。
{{ filter_expression | filter : expression : comparator }}
Angular includes a $filter provider, which you can use to run filters in your JavaScript before parsing into the DOM. This will preprocess our data before sending it to the View, which avoids the step of parsing the DOM and understanding the inline filter syntax.
角包含一个$filter提供程序，您可以使用它在解析DOM之前在JavaScript中运行过滤器。这将在将数据发送到视图之前对数据进行预处理，这避免了解析DOM和理解内联过滤器语法的步骤。
$filter('filter')(array, expression, comparator);
Yes, for better performance, Use
是的，为了更好的性能，请使用
$scope.description: $translate.instant('DESCRIPTION')
in Controller, instead of,
而不是在控制器,
{{'DESCRIPTION' | translate }}
Furthermore,
此外,
It depends on what you want to achieve. Here is another way to increase performance. One Time Binding
这取决于你想要实现什么。这是另一种提高性能的方法。一次绑定
Angular 1.3 added :: notation to allow one time binding. In summary, Angular will wait for a value to stabilize after it’s first series of digest cycles, and will use that value to render the DOM element. After that, Angular will remove the watcher forgetting about that binding.
角1.3增加::表示法允许一次绑定。总之，角度将等待一个值在它的第一系列摘要循环之后稳定下来，并将使用该值来呈现DOM元素。在那之后，角将移除观察者忘记那个绑定。
#1
3
short answer: yes
简短的回答:是的
long answer:
长一点的回答:
your bindings will have to be updated in every digest cycle which affects the used variables. storing the value in a variable and only updating it if something changes will improve your performance. however this will only be critical if you reach a certain amount of complexity. as long as your app doesn't grow too much this won't be a threat to think about - yet.
必须在每个影响使用的变量的摘要周期中更新绑定。将值存储在变量中，只有在发生更改时才进行更新，这将提高性能。然而，只有当您达到一定程度的复杂性时，这才是至关重要的。只要你的应用不长太多，这就不会对你构成威胁。
i wouldn't necessarily call it a best practice, because it can make your code more complex and harder to read/understand/maintain. performance isn't always an issue. it just starts to be one as soon as it's absent by default ;)
我不认为这是最佳实践，因为它可以使您的代码更复杂、更难读/理解/维护。性能并不总是一个问题。默认情况下不存在时，它就开始为1;
a further improvement you can do is use ng-bind and ng-bind html instead whenever possible, because it can be rendered faster, since it can skip some internal steps of angularJS whilst compiling the expression.
您可以做的进一步改进是尽可能使用ng-bind和ng-bind html，因为它可以更快地呈现，因为它可以在编译表达式时跳过angularJS的一些内部步骤。
so e.g. use
所以如使用
<div ng-bind="foo"></div>
instead of
而不是
<div>{{ foo }}</div>
if possible
如果可能的话
#2
0
The key concept behind these performance considerations is reducing the number of $$watchers inside Angular to improve the $digest cycle’s performance, something you’ll see and hear more of as you continue working with Angular. These are crucial to keeping our application state fast and responsive for the user. Each time a Model is updated, either through user input in the View, or via service input to the Controller, Angular runs something called a $digest cycle.
这些性能考虑背后的关键概念是减少$ observer的数量，以提高$digest循环的性能，随着您继续使用该循环，您将会看到和听到更多。这些对于保持我们的应用程序状态快速和响应用户非常重要。每次模型更新时，无论是通过视图中的用户输入，还是通过对控制器的服务输入，角都运行一个称为$digest循环的东西。
This cycle is an internal execution loop that runs through your entire application’s bindings and checks if any values have changed. If values have changed, Angular will also update any values in the Model to return to a clear internal state. When we create data-bindings with AngularJS, we’re creating more $$watchers and $scope Objects, which in turn will take longer to process on each $digest. As we scale our applications, we need to be mindful of how many scopes and bindings we create, as these all add up quickly - each one being checked per $digest loop.
这个循环是一个内部执行循环，在整个应用程序的绑定中运行，并检查是否有任何值发生了更改。如果值发生了变化，那么angle也会更新模型中的任何值，以返回一个清晰的内部状态。当我们使用AngularJS创建数据绑定时，我们创建了更多的$watchers和$scope对象，反过来，每个$digest将需要更长的时间来处理。当我们扩展我们的应用程序时，我们需要注意我们创建了多少范围和绑定，因为这些都是快速相加的——每个$digest循环检查每个范围和绑定。
Angular runs every single filter twice per $digest cycle once something has changed. This is some pretty heavy lifting. The first run is from the $$watchers detecting any changes, the second run is to see if there are further changes that need updated values.
角每一个过滤器每$摘要周期运行两次，一旦发生变化。这是相当沉重的负担。第一次是$watchers检测任何更改时的第一次，第二次是查看是否有进一步的更改需要更新值。
Here’s an example of a DOM filter, these are the slowest type of filter, preprocessing our data would be much faster. If you can, avoid the inline filter syntax.
这是一个DOM过滤器的例子，这些是最慢的过滤器类型，预处理我们的数据要快得多。如果可以，避免使用内联过滤器语法。
{{ filter_expression | filter : expression : comparator }}
Angular includes a $filter provider, which you can use to run filters in your JavaScript before parsing into the DOM. This will preprocess our data before sending it to the View, which avoids the step of parsing the DOM and understanding the inline filter syntax.
角包含一个$filter提供程序，您可以使用它在解析DOM之前在JavaScript中运行过滤器。这将在将数据发送到视图之前对数据进行预处理，这避免了解析DOM和理解内联过滤器语法的步骤。
$filter('filter')(array, expression, comparator);
Yes, for better performance, Use
是的，为了更好的性能，请使用
$scope.description: $translate.instant('DESCRIPTION')
in Controller, instead of,
而不是在控制器,
{{'DESCRIPTION' | translate }}
Furthermore,
此外,
It depends on what you want to achieve. Here is another way to increase performance. One Time Binding
这取决于你想要实现什么。这是另一种提高性能的方法。一次绑定
Angular 1.3 added :: notation to allow one time binding. In summary, Angular will wait for a value to stabilize after it’s first series of digest cycles, and will use that value to render the DOM element. After that, Angular will remove the watcher forgetting about that binding.
角1.3增加::表示法允许一次绑定。总之，角度将等待一个值在它的第一系列摘要循环之后稳定下来，并将使用该值来呈现DOM元素。在那之后，角将移除观察者忘记那个绑定。