A brief discussion on tips for optimizing binding (dirty checking) performance in Angular

This article will introduce you to Angular performance optimization techniques in binding (dirty checking). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

#1. Why should we optimize

Two-way binding is a double-edged sword. While improving development efficiency, it also sacrifices performance. Of course, with the improvement of hardware performance and the improvement of Angular's own performance, for applications of general (small and medium) complexity, performance problems can be ignored. But for special scenarios or complex pages, we need to deal with data binding issues separately, otherwise there will be lags and affect the user experience. [Recommended related tutorials: "angular tutorial"]

2. In terms of programming habits

, some daily tips and habits can be used Improve performance in Angular bindings.

2.1. NgForOf, add trackBy to improve performance

trackBy is a function that defines how to track changes in iterable items. When items are added, moved, or removed from the iterator, the directive must re-render the appropriate DOM node. To minimize churn in the DOM, only nodes that have changed are re-rendered.

By default, the change detector assumes that the object instance identifies the iterable object. When this function is provided, the directive uses the result of calling this function to identify the item node, rather than the identity of the object itself.

2.2. Three ways of Angular data binding

<div>
    <span>Name {{item.name}}</span>  <!-- 1. 直接绑定 -->
    <span>Classes {{item | classPipe}}</span><!-- 2. pipe方式-->
    <span>Classes {{classes(item)}}</span><!-- 3.绑定方法调用的结果 -->
</div>

• Direct binding: In most cases, These are the best performance methods.

• The result of the binding method call: During each dirty value detection process, the classes equation must be called once. If there are no special needs, this method of use should be avoided as much as possible.

• pipe method: It is similar to the binding function. Every time the dirty value detection classPipe is called. However, Angular has optimized the pipe and added caching. If the item is equal to the last time, the result will be returned directly.

<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>

2.3. Unless necessary, use one-way binding to reduce the number of monitoring values

For general data, it only needs to be displayed to users and does not need to be modified. Then for this part of the data, just use one-way binding (ts->html).
Such as:

<!-- 也称插值绑定 -->
 <span>{{yourMessage}}</span>

3. ChangeDetectionStrategy.OnPush to improve performance

For some very complex pages, the above tips are not enough, but Angular also takes these into consideration and provides many methods.
Angular Comparison AngularJS changes detection from the original two-way detection (parent->child, child->parent) to one-way (parent->child). So every change detection will converge deterministically.
When Angular defines a component, you can pass in a change detection configuration item as

changeDetection: ChangeDetectionStrategy.OnPush | ChangeDetectionStrategy.Default;

The onpush strategy only determines whether the input reference (if it is an object) has changed to determine whether to perform a dirty check. Therefore, we can use the onpush strategy to reduce the overhead of change detection.

4. Use ngzone-runOutsideAngular to optimize

Angular relies on NgZone to listen for asynchronous operations and perform change detection from the root. In other words, every addEventListener in our code triggers a dirty check. But if we are very clear, some of the things addEventListener needs to execute will not (or can be ignored) affect the data results, otherwise it will trigger a dirty check. For example, monitor scroll, monitor mouse events, etc.

In this case, we can use the runOutsideAngular provided by zone to prevent these events from triggering dirty checks.

this.zone.runOutsideAngular(() => {
    window.document.addEventListener('mousemove', this.bindMouse);
});

5. Manually control the dirty check ChangeDetectorRef

Angular's ChangeDetectorRef instance provides a method to bind or unbind the dirty check of a component.

class ChangeDetectorRef {
  markForCheck() : void     // 通知框架进行变化检查/Change Detection
  detach() : void           // 禁止脏检查
  detectChanges() : void    // 手工触发脏检查， 从该组件到各个子组件执行一次变化检测
  checkNoChanges() : void
  reattach() : void         // detach逆操作，启用脏检查
}

6. Summary

• Some small habits can improve the performance of angular;

• For complex applications, or when lags occur, we also have solutions!

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of A brief discussion on tips for optimizing binding (dirty checking) performance in Angular. For more information, please follow other related articles on the PHP Chinese website!