Angular에서 바인딩(더티 검사) 성능을 최적화하기 위한 팁에 대한 간략한 토론-JS 튜토리얼-php.cn

Angular에서 바인딩(더티 검사) 성능을 최적화하기 위한 팁에 대한 간략한 토론

青灯夜游

풀어 주다： 2021-06-22 10:44:55

앞으로

2255명이 탐색했습니다.

이 글에서는 바인딩(더티 검사)의 Angular 성능 최적화 기술을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular에서 바인딩(더티 검사) 성능을 최적화하기 위한 팁에 대한 간략한 토론

1. 최적화해야 하는 이유

양날의 바인딩은 개발 효율성을 향상시키지만 성능을 희생시키는 양날의 검입니다. 물론, 하드웨어 성능의 향상과 Angular 자체 성능의 향상으로 일반적인(중소형) 복잡성의 애플리케이션에서는 성능 문제를 무시할 수 있습니다. 그러나 특별한 시나리오나 복잡한 페이지의 경우 데이터 바인딩 문제를 별도로 처리해야 합니다. 그렇지 않으면 지연이 발생하고 사용자 경험에 영향을 미칠 것입니다. [관련 튜토리얼 추천: "angular Tutorial"]

2. 프로그래밍 습관 측면에서

일반적인 팁과 습관 중 일부는 Angular 바인딩의 성능을 향상시킬 수 있습니다.

2.1. trackBy를 추가하여 성능 향상

trackBy는 반복 가능한 항목의 변경 사항을 추적하는 방법을 정의합니다. 항목이 반복자에서 추가, 이동 또는 제거되면 지시문은 적절한 DOM 노드를 다시 렌더링해야 합니다. DOM 이탈을 최소화하기 위해 변경된 노드만 다시 렌더링됩니다.

기본적으로 변경 감지기는 객체 인스턴스가 반복 가능 항목을 식별한다고 가정합니다. 이 함수가 제공되면 지시문은 개체 자체의 ID가 아닌 항목 노드를 식별하기 위해 이 함수 호출 결과를 사용합니다.

2.2 Angular 데이터 바인딩의 세 가지 방법

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

로그인 후 복사

직접 바인딩: 대부분의 경우 이것이 가장 좋은 수행 방법입니다.
바인딩 메소드 호출 결과: 각 더티 값 감지 프로세스 동안 클래스 방정식을 한 번 호출해야 합니다. 특별한 요구사항이 없다면 이 사용 방법은 최대한 피해야 합니다.
pipe 메소드: 바인딩 기능과 유사하며 더티 값 감지 classPipe가 매번 호출됩니다. 그러나 Angular는 파이프를 최적화하고 캐싱을 추가했습니다. 항목이 마지막 시간과 같으면 결과가 직접 반환됩니다.

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

로그인 후 복사

2.3. 필요한 경우가 아니면 단방향 바인딩을 사용하여 모니터링 값 수를 줄입니다.

일반 데이터의 경우 사용자에게 표시하기만 하면 되며 수정할 필요가 없습니다. 그런 다음 데이터의 이 부분에 대해 단방향 바인딩(ts->html)을 사용하세요.
예:

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

로그인 후 복사

3. 성능 향상을 위한 ChangeDetectionStrategy.OnPush

매우 복잡한 일부 페이지의 경우 위의 팁을 참조하세요. 이것만으로는 충분하지 않지만 Angular도 이러한 점을 고려하여 다양한 메소드를 제공합니다.
각도 비교 AngularJS는 감지를 원래의 양방향 감지(부모->자식, 자식->부모)에서 단방향(부모->자식)으로 변경합니다. 따라서 모든 변경 감지는 결정적으로 수렴됩니다.
Angular가 구성 요소를 정의할 때 변경 감지 구성 항목을

changeDetection: ChangeDetectionStrategy.OnPush | ChangeDetectionStrategy.Default;

로그인 후 복사

로 전달할 수 있습니다. onpush 전략은 입력 참조(객체인 경우)가 변경되었는지 여부만 확인하여 더티 검사를 수행할지 여부를 결정합니다. 따라서 onpush 전략을 사용하여 변경 감지 오버헤드를 줄일 수 있습니다.

4. ngzone-runOutsideAngular 최적화 사용

Angular는 NgZone을 사용하여 비동기 작업을 수신하고 루트에서 변경 감지를 수행합니다. 즉, 코드의 모든 addEventListener는 더티 검사를 트리거합니다. 그러나 매우 명확하다면 addEventListener가 실행해야 하는 일부 작업은 데이터 결과에 영향을 미치지 않거나 무시할 수 있습니다. 그렇지 않으면 더티 검사가 트리거됩니다. 예를 들어 스크롤 모니터링, 마우스 이벤트 모니터링 등이 있습니다.

이 경우 zone에서 제공하는 runOutsideAngular를 사용하여 이러한 이벤트가 더티 검사를 유발하는 것을 방지할 수 있습니다.

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

로그인 후 복사

5. 더티 검사를 수동으로 제어합니다. ChangeDetectorRef

Angular의 ChangeDetectorRef 인스턴스는 구성 요소의 더티 검사를 바인딩하거나 바인딩 해제하는 방법을 제공합니다.

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

로그인 후 복사