각도에서 성능을 최적화하는 방법은 무엇입니까? 변경 감지 방법에 대한 간략한 분석

angular성능을 최적화하는 방법은 무엇입니까? 다음 기사에서는 Angular의 성능 최적화 솔루션인 변경 감지에 대해 심층적으로 소개합니다. 도움이 되기를 바랍니다.

Angular

能 성능 최적화 - 변화 감지

프런트 엔드 성능 지표에 대한 설명은 업계에서 고유한 단어를 사용합니다. 요약은 첫 화면의 성능 및 페이지 유창성과 관련이 있습니다. 이번에는 페이지 플루언시(page fluency) 관점에서 페이지 상호작용 성능 최적화를 분석해 보겠습니다. [관련 튜토리얼 추천 : "angular tutorial"]

페이지 플루언시란? 퉁过 페이지 유창성은 프레임 속도 FPS(초당 전송 프레임 수)로 판단됩니다. 일반적으로 주류 브라우저 화면 새로 고침 빈도는 60Hz(초당 60회)이며 가장 좋은 프레임 속도는 60입니다. FPS, 프레임 속도가 높을수록 페이지가 더 부드러워집니다. 60Hz는 디스플레이 화면이 16.6ms마다 새로 고쳐짐을 의미합니다. 즉, 각 페이지 렌더링이 16.6ms 내에 완료되어야 합니다. 그렇지 않으면 페이지가 프레임을 잃고 정지되는 현상이 발생합니다. . 근본 원인은 브라우저의 JavaScript 실행과 페이지 렌더링이 서로를 차단하는 것입니다.

           Chrome의 개발자 도구에서는 아래와 같이 Cmd+Shift+P를 실행하고 show fps를 입력하여 fps 패널을 빠르게 열 수 있습니다.

FPS 패널을 관찰하면 현재 페이지의 유창함을 쉽게 모니터링할 수 있습니다

根因在于：浏览器中的 JavaScript 执行和页面渲染会相互阻塞。

         在 Chrome 的 devtools 中我们可以执行 Cmd+Shift+P 输入 show fps 来快速打开 fps 面板，如下图所示：

通过观察 FPS 面板，我们可以很方便的对当前页面的流畅度进行监控

1 影响页面性能的因素

         页面交互是否流畅，在于页面响应是否流畅，而页面响应其本质上就是把页面状态的变更重新渲染到页面上的过程。

         页面响应过程大致如下：

一般情况Event Handler事件处理逻辑不会消耗太多时间，所以影响angular性能的因素主要在于异步事件触发和变更检测

1 영향 페이지 성능 요인 交페이지 상호작용이 원활한지 여부는 페이지 응답이 원활한지 여부이며,

페이지 응답

은 본질적으로 페이지 상태 변경을 페이지에 다시 렌더링하는 것입니다.

페이지 응답 프로세스는 대략 다음과 같습니다.

일반적으로 이벤트 핸들러 이벤트 처리 로직은 시간을 많이 소모하지 않으므로 각도 성능에 영향을 미치는 요소는 주로 비동기 이벤트 트리거링 및 변경 감지에 있습니다. . 일반적으로 이벤트 핸들러 이벤트 처리 로직은 시간을 많이 소모하지 않으므로 Angular 성능에 영향을 미치는 요소는 주로 비동기 이벤트 트리거링 및 변경 감지에 있습니다.

          Angular의 경우 페이지 렌더링 프로세스는 변경 감지 프로세스입니다. 페이지 프레임 손실 및 지연을 방지하려면 Angular의 변경 감지가 16.6ms 이내에 완료되어야 한다고 이해할 수 있습니다. 다음 세 가지 측면에서 페이지 응답 성능을 최적화할 수 있습니다. (1) 트리거 이벤트 단계의 경우

비동기 이벤트의 트리거링을 줄여

전체 변경 감지 및 다시 렌더링 횟수를 줄일 수 있습니다.

(2) 이벤트 핸들러 실행 로직 단계의 경우 복잡한 코드 로직을 최적화하여 실행 시간을 줄일 수 있습니다. (3) 변경 감지 감지 데이터 바인딩 및 DOM 업데이트 단계의 경우 변경 감지 및 템플릿 데이터 계산 횟수를 줄일 수 있습니다. 렌더링 시간을 단축합니다.

(2) 이벤트 핸들러의 경우 특정 문제를 논의 없이 자세히 분석해야 합니다. 주로 (1) (3)

2

에 최적화됩니다. plan

2.1 비동기 이벤트 트리거 감소

​​​​​​​ Angular의 기본 변경 감지 모드에서 비동기 이벤트는 전역 변경 감지를 트리거합니다. Angular의 성능이 크게 향상되었습니다. 비동기 이벤트에는 매크로 태스크(매크로 미션) 사건과 마이크로 태스크 마이크로 태스크 이벤트가 포함됩니다.

비동기 이벤트의 최적화는 주로 문서의 이벤트 모니터링을 위한 것입니다. 예를 들어 문서에 대한 click, mouseup, mousemove... 및 기타 수신 이벤트가 있습니다. ： 감독 이벤트 시나리오: 事 Renderer2.Listen (documen, ...)

Fromevent (Document, ...)

Document.adDeventristener (…)

🎜 DOM 모니터링 이벤트는 트리거할 필요가 없을 때 제거해야 합니다. . 🎜

예: [pop] 프롬프트 상자 명령

사용 시나리오: 테이블 열 필터링, 아이콘 이외의 위치 클릭 또는 페이지 스크롤, 열 필터링 팝업 상자 숨기기

이전 접근 방식은 문서의 클릭 이벤트를 직접 모니터링하고 스크롤 이벤트의 경우 프롬프트 상자가 표시되지 않는 단점이 있지만 여전히 청취 이벤트가 있으므로 매우 불합리합니다.案 합리적인 해결 방법: 프롬프트가 표시되면 클릭 및 스크롤 이벤트를 모니터링하고 숨겨진 경우 모니터링 사건을 제거합니다.

자주 발생하는 DOM 수신 이벤트의 경우 rjx 연산자를 사용하여 이벤트를 최적화할 수 있습니다. 자세한 내용은

Rjx Operator

를 참조하세요. RxJS 마블.

2.2 변경 감지

변경 감지란 무엇인가요?

변경 감지를 이해하려면 변경 감지 목표에서 답을 찾을 수 있습니다. 각도 변화 감지의 목표는 모델(TypeScript 코드)과 템플릿(HTML)을 동기화 상태로 유지하는 것입니다. 따라서 변경 감지는

모델 변경을 감지하는 동안 템플릿을 업데이트합니다(

DOM ) 으로 이해될 수 있습니다. 변경 감지 프로세스는 무엇인가요?

                                                      는 구성 요소 트리에서

하향식

순서로 변경 감지를 수행하여 감지할 수 있습니다. 즉, 상위 구성 요소에서 변경 감지를 수행하면 됩니다. 먼저 하위 구성요소에 적용합니다. 먼저 상위 구성 요소의 데이터 변경 사항을 확인한 다음 상위 구성 요소 템플릿을 업데이트합니다. 템플릿을 업데이트할 때 하위 구성 요소를 만나면 하위 구성 요소에 바인딩된 값을 업데이트한 다음 하위 구성 요소를 입력하여 @Input 입력 값의 인덱스가 변경된 경우 하위 구성 요소를 더티로 표시합니다. 하위 구성 요소를 표시한 후 모든 상위 구성 요소 템플릿 이후에 하위 구성 요소 뒤에 있는 템플릿을 계속 업데이트합니다. 업데이트되었으면 하위 구성 요소 감지를 변경하세요. 2.2.1 Angular 변경 감지 원리

기본 변경 감지 기본 모드에서 Angular의 변경 감지를 트리거하는 비동기 이벤트의 원리는 각도가 Zone.js를 사용하여 루트 구성 요소에서 ApplicationRef의 Tick() 메서드를 호출하여 처리한다는 것입니다. 비동기 이벤트. 하위 구성 요소에 대한 변경 감지를 수행합니다. Angular 애플리케이션의 초기화 과정에서 영역(NgZone)이 인스턴스화되고 모든 로직은 해당 객체의 _inner 객체에서 실행됩니다.

Zone.js는 다음 클래스를 구현합니다.

Zone 클래스, JavaScript 이벤트의 실행 환경 스레드와 마찬가지로 일부 데이터를 전달할 수 있으며 상위 및 하위 영역이 있을 수 있습니다.

• ZoneTask 클래스, 패키지된 비동기 이벤트, 이러한 작업에는 Promise에서 생성한
• MicroTask라는 세 가지 하위 클래스가 있습니다.
  • MacroTask, setTimeout 등으로 생성됨
  • EventTask, DOM 이벤트와 같이 addEventListener 등으로 생성됩니다.
  ZoneSpec 개체, ngZone을 생성할 때 제공되는 매개 변수에는 감지를 트리거할 수 있는 세 가지 후크가 있습니다.
• onInvoke, 특정 콜백 함수가 호출될 때 트리거되는 후크입니다.
  • onInvokeTask는 setTimeout이 만료되는 경우와 같이 ZoneTask가 트리거될 때 트리거되는 후크입니다.
  • onHasTask, ZoneTask의 유무가 감지될 때 트리거되는 후크입니다(즉, 첫 번째 예약된 영역과 마지막 호출 또는 취소 작업에 대해 트리거됩니다).
  ZoneDelegate 클래스는 후크 호출을 담당합니다.
• 탐지 프로세스의 원리는 대략 다음과 같습니다.

              사용자 작업은 비동기 이벤트를 트리거합니다(예: DOM 이벤트, 인터페이스 요청...)

=> ZoneTask 클래스는 이벤트를 처리합니다. zone의 runTask() 메소드는 bootTask() 함수에서 호출됩니다. runTask 메소드에서 zone은 _zoneDelegate 인스턴스 속성을 통해 ZoneSpec의 후크를 호출합니다.

=> ZoneSpec의 세 가지 후크(onInvokeTask, onInvoke, onHasTask)는 checkStable을 전달합니다. () 함수는 zone.onMicrotaskEmpty.emit(null) 알림을 트리거합니다.

=> 루트 구성 요소는 onMicrotaskEmpty를 수신한 후 Tick()을 호출하고 Tick 메서드는 DetectChanges()를 호출하여 감지를 시작합니다. 루트 구성 요소

= > ··· refreshView()는 executeTemplate()을 호출하고 executeTemplate 메서드는 templateFn( ) 템플릿을 업데이트하기 위해 하위 구성 요소에 바인딩된 값(이 때 하위 구성 요소 @Input()의 입력 참조가 변경되었는지 여부를 감지합니다. 변경인 경우 하위 구성 요소는 Dirty 로 표시됩니다. 즉, 이 하위 구성 요소에는 변경 감지가 필요합니다)detectChanges()从根组件开始检测

=> ··· refreshView()调用executeTemplate()，executeTemplate方法中调用templateFn()更新模板、子组件绑定的值（这时候会去检测子组件的@Input()输入引用是否改变，如果有改变，会将子组件标记为Dirty，也就是该子组件需要变更检测

자세한 변경 감지 원칙 순서도:

프로세스 단순화:

비동기 이벤트 트리거

=> ZoneTask가 이벤트를 처리합니다

=> ZoneDelegate가 ZoneSpec의 후크를 호출하여 onMicrotaskEmpty 알림을 트리거합니다.

=> dom을 감지하고 업데이트하기 시작합니다

위 코드에서 볼 수 있듯이 当微任务为空的时候才会触发变更检测.

간단한 변경 감지 원리 흐름도:

Angular 소스 코드 분석 Zone.js 참조 blog.

2.2.2 변경 감지 최적화 솔루션

1) OnPush 모드 사용

원리: 한 번의 변경 감지에 소요되는 시간을 줄입니다.

                          OnPush 모드와 기본 모드의 차이점은 DOM 수신 이벤트, 타이머 이벤트 및 약속이 변경 감지를 트리거하지 않는다는 것입니다. 기본 모드의 구성 요소 상태는 항상 CheckAlways입니다. 즉, 검색 주기마다 구성 요소를 테스트해야 합니다.

OnPush 모드: 다음 상황에서는 변경 감지가 트리거됩니다

S1, 구성 요소 변경의 @Input 참조.

S2. 클릭, 제출, 마우스 다운과 같은 하위 구성 요소의 DOM 바인딩 이벤트를 포함한 구성 요소의 DOM 바인딩 이벤트입니다. @HostListener ()

참고:

renderr2.listen()을 통해 수신된 DOM 이벤트는 변경 감지를 트리거하지 않습니다. 또한 Async 파이프를 설정합니다.

S4. 변경 감지를 수동으로 트리거하려면 다음 방법을 사용하세요.

ChangeDetectorRef.DetectChanges(): 현재 구성 요소 및 OnPush가 아닌 하위 구성 요소의 변경 감지를 트리거합니다.

  ChangeDetectorRef.markForCheck(): 현재 보기와 모든 상위 항목을 더티로 표시하고 다음 감지 주기에서 감지가 트리거됩니다.

ApplicationRef.tick(): 변경 감지를 트리거하지 않습니다

2) NgZone.runOutsideAngular() 사용

Principle: 변경 감지 수를 줄입니다.

NgZone.runOutsideAngular()의 콜백에 전역 DOM 이벤트 모니터링을 작성합니다. 메서드를 사용하면 DOM 이벤트가 Angular의 변경 감지를 트리거하지 않습니다. 현재 구성 요소가 업데이트되지 않은 경우 콜백 함수에서 ChangeDetectorRef의 discoverChanges() 후크를 실행하여 현재 구성 요소의 변경 감지를 수동으로 트리거할 수 있습니다.

예: app-icon-react 동적 아이콘 구성 요소

2.2.3 디버깅 방법

방법 1: 브라우저 콘솔에서 Angular DevTools 플러그인을 사용하여 특정 DOM 이벤트를 볼 수 있습니다. 감지 상태:

방법 2: 콘솔에 ng.profiler.timeChangeDetection()을 직접 입력하면 감지 시간을 볼 수 있습니다. 이 방법을 사용하면 전역 감지 시간을 볼 수 있습니다. 참고 블로그

각도 변화 감지 프로파일링

2.3 템플릿(HTML) 최적화

2.3.1 DOM 렌더링 감소: ngFor 및 trackBy *ngFor의 trackBy 속성을 사용하여 Angular만 변경하고 다시 렌더링 전체 항목 목록을 다시 로드할 필요 없이 변경된 항목을 다시 로드할 수 있습니다.

                            예: 테이블 정렬 시나리오. ngFor에 trackBy를 추가하면 테이블 렌더링 시 row dom 요소만 이동되며, trackBy를 추가하지 않으면 기존 테이블 dom 요소가 먼저 삭제된 후 row dom 요소가 추가됩니다. 분명히 DOM 요소만 이동하는 성능이 훨씬 더 좋아질 것입니다.板2.3.2 템플릿 표현식에 함수를 사용하지 마세요.

Angular 템플릿 표현식에 함수 호출을 사용하지 마세요. 대신 파이프 PIPE를 사용하여 수동으로 대체할 수도 있습니다. 템플릿에서 함수를 사용하는 경우 값의 변경 여부에 관계없이 변경 감지가 수행될 때마다 함수가 실행되므로 성능에 영향을 미칩니다.

템플릿에서 함수를 사용하는 시나리오:

2.3.3 ngFor 사용 줄이기

ngFor 사용은 데이터 양이 많을 때 성능에 영향을 미칩니다.

예:

ngFor 사용:

ngFor를 사용하지 않음: 성능이 약 10배 향상되었습니다.

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. 프로그래밍 비디오 ! !

위 내용은 각도에서 성능을 최적화하는 방법은 무엇입니까? 변경 감지 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!