mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
docs: fix lint errors for change detection guides (#47952)
PR Close #47952
This commit is contained in:
committed by
Andrew Kushnir
parent
665af467d8
commit
f01ea3c9dd
@@ -7,11 +7,11 @@ Change detection is sufficiently fast for most applications. However, when an ap
|
||||
If you are confident that a part of the application is not affected by a state change, you can use [OnPush](https://angular.io/api/core/ChangeDetectionStrategy) to skip change detection in an entire component subtree.
|
||||
|
||||
|
||||
## Using OnPush
|
||||
## Using `OnPush`
|
||||
|
||||
OnPush change detection instructs Angular to run change detection for a component subtree **only** when:
|
||||
* The root component of the subtree receives new inputs as the result of a template binding. Angular compares the current and past value of the input with `==`
|
||||
* Angular handles an event _(e.g. using event binding, output binding, or `@HostListener`)_ in the subtree's root component or any of its children whether they are using OnPush change detection or not.
|
||||
* Angular handles an event _(for example using event binding, output binding, or `@HostListener` )_ in the subtree's root component or any of its children whether they are using OnPush change detection or not.
|
||||
|
||||
You can set the change detection strategy of a component to `OnPush` in the `@Component` decorator:
|
||||
|
||||
@@ -25,7 +25,7 @@ export class MyComponent {}
|
||||
|
||||
## Common change detection scenarios
|
||||
|
||||
This section examines several common change detection scenarios to illustrate Angular's behavior.
|
||||
This section examines several common change detection scenarios to illustrate Angular's behavior.
|
||||
|
||||
## An event is handled by a component with default change detection
|
||||
|
||||
|
||||
@@ -4,27 +4,27 @@ On every change detection cycle, Angular synchronously:
|
||||
|
||||
* Evaluates all template expressions in all components, unless specified otherwise, based on that each component's detection strategy
|
||||
* Executes the `ngDoCheck`, `ngAfterContentChecked`, `ngAfterViewChecked`, and `ngOnChanges` lifecycle hooks.
|
||||
A single slow computation within a template or a lifecycle hook can slow down the entire change detection process because Angular runs the computations sequentially.
|
||||
A single slow computation within a template or a lifecycle hook can slow down the entire change detection process because Angular runs the computations sequentially.
|
||||
|
||||
## Identifying slow computations
|
||||
|
||||
You can identify heavy computations with Angular DevTools’ profiler. In the performance timeline, click on a bar to preview a particular change detection cycle. This displays a bar chart, which shows how long the framework spent in change detection for each component. When you click on a component, you can preview how long Angular spent evaluating its template and lifecycle hooks.
|
||||
You can identify heavy computations with Angular DevTools’ profiler. In the performance timeline, click a bar to preview a particular change detection cycle. This displays a bar chart, which shows how long the framework spent in change detection for each component. When you click a component, you can preview how long Angular spent evaluating its template and lifecycle hooks.
|
||||
|
||||
<div class="lightbox">
|
||||
<img alt="Angular DevTools profiler preview showing slow computation" src="generated/images/guide/change-detection/slow-computations.png">
|
||||
</div>
|
||||
|
||||
For example, in the screenshot above, we selected the second change detection cycle after the profiler started where Angular spent over 573 ms. Angular spent most time in the `EmployeeListComponent`. In the details panel, we can see that we spent over 297ms in evaluating the template of the `EmployeeListComponent`.
|
||||
For example, in the preceding screenshot, the second recorded change detection cycle is selected. Angular spent over 573 ms on this cycle, with the most time spent in the `EmployeeListComponent`. In the details panel, you can see that Angular spent over 297 ms evaluating the template of the `EmployeeListComponent`.
|
||||
|
||||
|
||||
## Optimizing slow computations
|
||||
|
||||
There are several techniques to eliminate slow computations:
|
||||
Here are several techniques to remove slow computations:
|
||||
|
||||
* **Optimizing the underlying algorithm**. This is the recommended approach; if you can speed up the algorithm that is causing the problem, you can speed up the entire change detection mechanism.
|
||||
* **Caching using pure pipes**. You can move the heavy computation to a pure [pipe](https://angular.io/guide/pipes). Angular will reevaluate a pure pipe only if it detects that its inputs changed, compared to the previous time Angular called it.
|
||||
* **Optimizing the underlying algorithm**. This is the recommended approach. If you can speed up the algorithm that is causing the problem, you can speed up the entire change detection mechanism.
|
||||
* **Caching using pure pipes**. You can move the heavy computation to a pure [pipe](https://angular.io/guide/pipes). Angular reevaluates a pure pipe only if it detects that its inputs have changed, compared to the previous time Angular called it.
|
||||
* **Using memoization**. [Memoization](https://en.wikipedia.org/wiki/Memoization) is a similar technique to pure pipes, with the difference that pure pipes preserve only the last result from the computation where memoization could store multiple results.
|
||||
* **Avoid repaints/reflows in lifecycle hooks**. Certain [operations](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/) cause the browser to either synchronously recalculate the layout of the page or re-render it. Since reflows and repaints are generally slow, we want to avoid performing them in every change detection cycle.
|
||||
* **Avoid repaints/reflows in lifecycle hooks**. Certain [operations](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/) cause the browser to either synchronously recalculate the layout of the page or re-render it. Since reflows and repaints are generally slow, you want to avoid performing them in every change detection cycle.
|
||||
|
||||
Pure pipes and memoization have different trade-offs. Pure pipes are an Angular built-in concept compared to memoization, which is a general software engineering practice for caching function results. The memory overhead of memoization could be significant if you invoke the heavy computation frequently with different arguments.
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
# Resolving Zone Pollution
|
||||
# Resolving zone pollution
|
||||
|
||||
**Zone.js** is a signaling mechanism that Angular uses to detect when an application state might have changed. It captures asynchronous operations like `setTimeout`, network requests, and event listeners. Angular schedules change detection based on signals from Zone.js
|
||||
|
||||
There are cases in which scheduled [tasks](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide#tasks) or [microtasks](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide#microtasks) don’t make any changes in the data model, which makes running change detection unnecessary. Common examples are:
|
||||
In some cases scheduled [tasks](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide#tasks) or [microtasks](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide#microtasks) don’t make any changes in the data model, which makes running change detection unnecessary. Common examples are:
|
||||
* `requestAnimationFrame`, `setTimeout` or `setInterval`
|
||||
* Task or microtask scheduling by third-party libraries
|
||||
|
||||
@@ -19,9 +19,9 @@ You can detect unnecessary change detection calls using Angular DevTools. Often
|
||||
In the image above, there is a series of change detection calls triggered by event handlers associated with an element. That’s a common challenge when using third-party, non-native Angular components, which do not alter the default behavior of `NgZone`.
|
||||
|
||||
|
||||
## Run tasks outside NgZone
|
||||
## Run tasks outside `NgZone`
|
||||
|
||||
In such cases, we can instruct Angular to avoid calling change detection for tasks scheduled by a given piece of code using [NgZone](https://angular.io/guide/zone).
|
||||
In such cases, you can instruct Angular to avoid calling change detection for tasks scheduled by a given piece of code using [NgZone](https://angular.io/guide/zone).
|
||||
|
||||
```ts
|
||||
import { Component, NgZone, OnInit } from '@angular/core';
|
||||
@@ -34,7 +34,7 @@ class AppComponent implements OnInit {
|
||||
}
|
||||
```
|
||||
|
||||
The snippet above instructs Angular that it should execute the `setInterval` call outside the Angular Zone and skip running change detection after `pollForUpdates` runs.
|
||||
The preceding snippet instructs Angular to call `setInterval` outside the Angular Zone and skip running change detection after `pollForUpdates` runs.
|
||||
|
||||
Third-party libraries commonly trigger unnecessary change detection cycles because they weren't authored with Zone.js in mind. Avoid these extra cycles by calling library APIs outside the Angular zone:
|
||||
|
||||
@@ -53,8 +53,8 @@ class AppComponent implements OnInit {
|
||||
}
|
||||
```
|
||||
|
||||
Running `Plotly.newPlot('chart', data);` within `runOutsideAngular` instructs the framework that it shouldn’t execute change detection after the execution of tasks scheduled by the initialization logic.
|
||||
Running `Plotly.newPlot('chart', data);` within `runOutsideAngular` instructs the framework that it shouldn’t run change detection after the execution of tasks scheduled by the initialization logic.
|
||||
|
||||
For example, if `Plotly.newPlot('chart', data)` adds event listeners to a DOM element, Angular will not execute change detection after the execution of their handlers.
|
||||
For example, if `Plotly.newPlot('chart', data)` adds event listeners to a DOM element, Angular does not run change detection after the execution of their handlers.
|
||||
|
||||
@reviewed 2022-05-04
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
# Angular Developer Guides
|
||||
# Angular developer guides
|
||||
|
||||
As an application framework, Angular includes a collection of well-integrated libraries that cover a wide variety of features.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user