집 > 기사 > 웹 프론트엔드 > Angular의 변경 감지 메커니즘에 대한 간략한 분석과 성능을 최적화하는 방법은 무엇입니까?

Angular의 변경 감지 메커니즘에 대한 간략한 분석과 성능을 최적화하는 방법은 무엇입니까?

青灯夜游앞으로: 2022-05-11 10:35:362522검색

변화 감지란 무엇인가요? 다음 글에서는 Angular의 변경 감지 메커니즘을 이해하고, 변경 감지의 작동 방식에 대해 이야기하고, Angular 변경 감지의 성능 최적화 방법을 소개합니다. 이 글이 모든 사람에게 도움이 되기를 바랍니다.

변경 감지란 무엇인가요?

변경 감지의 개념

구성 요소의 데이터 상태가 변경된 후에는 이에 따라 뷰도 업데이트되어야 합니다. 뷰와 데이터를 동기화하는 이러한 메커니즘을 변경 감지라고 합니다. [관련 튜토리얼 추천: "angular Tutorial"]

Trigger timing of 변화 감지

비동기 작업(Events, Timer, XHR)이 발생하는 한 Angular는 상태가 변경되었을 수 있다고 생각하고, 변경 감지를 수행합니다.

이벤트:: click, mouseover, mouseout, keyup, keydown 및 기타 브라우저 이벤트
Timer: setTimeout/setInterval; 다양한 요청 등
변경 감지는 비동기 작업에서 수행되므로 Angular는 어떻게 비동기 요청을 구독하고 변경 감지를 수행합니까?

여기서 NgZone과 해당 포크 개체 Zone.js를 소개합니다.

Zone.js는 브라우저에서 비동기 활동을 캡슐화하고 가로채는 데 사용됩니다. 또한

비동기 수명 주기 후크NgZone以及它的fork对象Zone.js。

Zone.js 用于封装和拦截浏览器中的异步活动、它还提供 异步生命周期的钩子 和 统一的异步错误处理机制。

Zone.js 是通过 Monkey Patching（猴子补丁） 的方式来对浏览器中的常见方法和元素进行拦截，例如 setTimeout 和 HTMLElement.prototype.onclick。Angular 在启动时会利用 Zone.js 修补几个低级浏览器 API，从而实现异步事件的捕获，并在捕获时间后调用变更检测。

Angular通过forkZone.js并拓展出一个自己的区域NgZone，让应用中的所有异步操作都会运行在这个区域中。

Angular的变更检测如何工作的？

Angualr会为每一个组件生成一个变化监测器changeDetector ，记录组件的变化状态。

我们在创建了一个Angular 应用后，Angular 会同时创建一个 ApplicationRef 的实例，这个实例代表的就是我们当前创建的这个 Angular 应用的实例。 ApplicationRef 创建的同时，会订阅 ngZone 中的 onMicrotaskEmpty 事件，在所有的微任务完成后调用所有的视图的detectChanges()来执行变更检测。

变更检测的执行顺序

更新所有子子组件绑定的属性
调用所有子组件生命周期的钩子 OnChanges, OnInit, DoCheck，AfterContentInit
更新当前组件的DOM
调用子组件的变更检测
调用所有子组件的生命周期钩子 ngAfterViewInit

举个栗子，我们在开发模式的时候可能会遇到这种报错:

Angular의 변경 감지 메커니즘에 대한 간략한 분석과 성능을 최적화하는 방법은 무엇입니까?

这是由于变更检测遵循从根组件开始，从上到下，执行每个组件的变更检测，直到最后一个组件达到稳定状态。而在下一次变更检测之前，子孙组件都不允许去修改父组件里的属性。

情况1 在开发模式下，Angular会进行二次检测 (生产环境下调用enableProdMode() 및 통합 비동기 오류 처리 메커니즘을 제공합니다.

Zone.js는 Monkey Patching을 사용하여 setTimeout 및 HTMLElement.prototype.onclick과 같은 브라우저의 일반적인 메서드와 요소를 가로챕니다. . Angular는 Zone.js를 활용하여 시작 시 여러 하위 수준 브라우저 API를 패치하여 비동기 이벤트를 캡처하고 캡처 시간 이후 변경 감지를 호출합니다. Angular는 Zone.js를 분기하고 자체 영역 NgZone을 확장하므로 애플리케이션의 모든 비동기 작업이 이 영역에서 실행됩니다.

Angular의 변경 감지는 어떻게 작동하나요?

Angualr는 각 구성 요소에 대한 변경 감지기 changeDetector를 생성하여 구성 요소의 변경 상태를 기록합니다.

Angular 애플리케이션을 생성한 후 Angular는 ApplicationRef의 인스턴스도 생성합니다. 이 인스턴스는 현재 생성 중인 Angular 애플리케이션의 인스턴스를 나타냅니다. ApplicationRef가 생성되면
onMicrotaskEmpty
이벤트, 모든 마이크로태스크가 완료된 후 모든 뷰의 DetectChanges()를 호출하여 변경 감지를 수행합니다.
변경 감지 실행 순서
모든 하위 하위 구성 요소에 바인딩된 속성 업데이트
🎜 🎜 🎜모든 하위 구성 요소의 라이프 사이클 후크 OnChanges, OnInit, DoCheck, AfterContentInit를 호출합니다.🎜🎜🎜🎜현재 구성 요소의 DOM을 업데이트합니다.🎜🎜🎜🎜하위 구성 요소의 변경 감지를 호출합니다.🎜🎜🎜🎜생명을 호출합니다. 모든 하위 구성 요소의 사이클 후크 ngAfterViewInit🎜🎜 🎜🎜예를 들어 개발 모드에 있을 때 다음 오류가 발생할 수 있습니다. 🎜🎜🎜🎜변경 감지는 루트 구성 요소부터 시작하여 위에서 아래로, 각 구성 요소에 대한 변경 감지를 수행하기 때문입니다. 마지막 구성 요소가 안정적인 상태에 도달할 때까지. 다음 변경 사항이 감지되기 전에는 하위 구성 요소가 상위 구성 요소의 속성을 수정할 수 없습니다. 🎜🎜🎜🎜사례 1🎜🎜 개발 모드에서 Angular는 🎜2차 감지🎜를 수행합니다(프로덕션 환경에서 enableProdMode()가 호출되면 감지 횟수가 1로 줄어듭니다). 🎜4단계🎜를 완료한 후 하위 컴포넌트의 상위 컴포넌트 속성을 수정하면 Angular가 두 번째 감지를 수행하여 두 값이 일치하지 않는 것을 발견하면 위 오류가 발생합니다. 🎜🎜🎜🎜사례 2🎜🎜 상위 구성 요소가 하위 구성 요소에 속성을 바인딩하는 한 OnChanges, OnInit, DoCheck, AfterContentInit 및 AfterViewInit 사이의 수명 주기 후크에서 다음 코드가 실행되는지 여부에 관계없이 오류가 발생합니다. 보고됩니다. 🎜
```
// #parent
{{data}}
<child [data]="data"></child>

// in child component ts, execute:
this.parent.data = &#39;new Value&#39;;
```
🎜🎜변경 감지를 위한 실행 전략🎜🎜🎜🎜🎜🎜🎜🎜기본 전략🎜🎜🎜🎜
이벤트가 변경 감지(예: 사용자 이벤트, 타이머, XHR, 약속 등)를 트리거할 때마다 이 기본 전략은 구성 요소 트리의 모든 구성 요소를 위에서 아래로 확인합니다. 구성 요소 종속성에 대해 어떤 가정도 하지 않는 보수적인 검사 방법을 더티 검사라고 합니다. 이 전략은 너무 많은 구성 요소를 적용할 때 애플리케이션 성능에 영향을 미칩니다.
OnPush 전략

구성 요소 데코레이터의 changeDetection을 수정합니다. OnPush 전략으로 설정한 후 Angular는 변경될 때마다 구성 요소와 구성 요소를 건너뜁니다. 구성 요소의 모든 하위 구성 요소에 대한 변경 감지가 트리거됩니다. changeDetection，设置为 OnPush 策略后，Angular 每次触发变化检测后会跳过该组件和该组件的所以子组件变化检测。

在 OnPush 策略下，只有以下这几种情况才会触发组件的变化检测：
- 输入值（@Input）更改（入input的值必须是一个新的引用）
- 当前组件或子组件之一触发了事件 (但在onPush策略中，以下操作不会触发变更检测)
  - setTimeout()
  - setInterval()
  - Promise.resolve().then()
  - this.http.get('...').subscribe()
- 手动触发变更检测(每个组件都会关联一个组件视图ChangeDetectorRef)
  - detectChanges(): 它会触发当前组件和子组件的变化检测
  - markForCheck()： 它不会触发变化检测，但是会把当前的OnPush组件和所以的父组件为OnPush的组件 标记为需要检测状态 ，在当前或者下一个变化检测周期进行检测
  - ApplicationRef.tick() : 它会根据组件的变化检测策略，触发整个应用程序的更改检测
- async pipe

对于Angular的变更检测如何优化？

由于组件默认执行 Default策略 ，任何异步操作都会触发整个组件数从上到下的检查。即使Angular团队不断提升性能，可以在毫秒内完成上百次检测，但是当应用拓展至百上千个组件组成时，庞大的组件树对应的变更检测也会达到性能瓶颈。

此时，我们就需要开始分析并减少不必要的检测次数。

如何减少检测次数

区域污染(Zone Pollution)

一般我们在生命周期钩子里使用第三方库，比如chart类库初始化，会自带requestAnimationRequest/setTimeout/addEventListener,我们可以将初始化方法写入NgZone的runOutsideAngular方法中。

Angular의 변경 감지 메커니즘에 대한 간략한 분석과 성능을 최적화하는 방법은 무엇입니까?

OnPush 策略

对于不涉及更新操作的视图可以剥离出组件，使用onPush策略，以通知更新的方式刷新视图(见上方 变更检测的执行策略 部分)。

Angular의 변경 감지 메커니즘에 대한 간략한 분석과 성능을 최적화하는 방법은 무엇입니까?

用 pure pipe 代替 {{function(data)}}

在html文件内，{{function(data)}}
OnPush 전략에서는 다음 상황에서만 구성 요소 변경 감지가 트리거됩니다.

(입력에 입력된 값은 새로운 값이어야 합니다) 참고)

Angular의 변경 감지 메커니즘에 대한 간략한 분석과 성능을 최적화하는 방법은 무엇입니까?

현재 구성요소 또는 하위 구성요소 중 하나가 이벤트를 트리거했습니다

setTimeout()

setInterval()
🎜Promise.resolve().then()🎜🎜🎜🎜this.http.get('...').subscribe()🎜🎜🎜🎜🎜🎜수동으로 변경 감지 트리거🎜(각 구성 요소는 구성 요소와 연결됩니다.) ViewChangeDetectorRef)

插件：Angular devtool使用介绍

Angular 9+, 支持Ivy。
Guide和下载地址

保证运行环境为开发环境

// environment.dev.ts
...
    production: false
...

angular.json > dev配置项 > "optimization": false

projects > your-project-name > architect > build > configurations > dev > "optimization": false

更多编程相关知识，请访问：编程教学！！

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

json html angular 封装 JS function 对象事件 default dom this promise 异步 prototype input http 性能优化

성명：

이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Node.js의 일반적인 내장 모듈에 대한 심층 분석다음 기사：Node.js의 일반적인 내장 모듈에 대한 심층 분석

Angular의 변경 감지 메커니즘에 대한 간략한 분석과 성능을 최적화하는 방법은 무엇입니까?

변경 감지란 무엇인가요?

변경 감지의 개념

Trigger timing of 변화 감지

Angular的变更检测如何工作的？

变更检测的执行顺序

Angular의 변경 감지는 어떻게 작동하나요?

변경 감지 실행 순서

对于Angular的变更检测如何优化？

如何减少检测次数

🎜Angular의 변경 감지를 최적화하는 방법은 무엇입니까? 🎜

🎜탐지 횟수를 줄이는 방법🎜

插件：Angular devtool使用介绍

관련 기사