0
223
VistasWhat is angular animation doing after a view is created and how to avoid it?
I have a very large and complex view that is configured by a customer. So I cannot make it easier, but I want to do my best to make it more performant and to load faster. I am benchmarking the view right now and I have one big block that i don't understand.
The following picture shows the problem. The left side is the view creation, this is my job to get the performance up. But the right side is angular animation. It are a lot of calls to _balanceNamespaceList, where angular does something I don't understand. When the view is created no animation is involved. I have a few animations for dropdowns and dialogs and so on, which are only rendered when they are opened, so they are inside an *ngIf.
Therefore I would like to understand what I have to do to improve that. I have turned off angular animation and this helps, but I would like to keep my animations.
1 Respuestas
Responde la pregunta0
I still have no clue what the angular code does, but I know what "causes" the problem. For each new components in your tree, that has animations, angular makes this balance-thing. It does not matter where the animations are used, but just that the component has its in the declaration, e.g. with
@Component({
animations: [
fadeAnimation
]
})
If the animation is used inside a structural directive (e.g. *ngIf, *ngSwitch and so) you can optimize it by introducing a new component. If often makes your code cleaner anyway, but I also have one strange case, where I have to split a very small component into two: The following component renders error messages for fields.
<div class="errors-container" *ngIf="snapshot.errorMessages.length > 0" @fade>
<div class="errors">
<ng-container *ngFor="let message of snapshot.errorMessages">
{{message}}
</ng-container>
</div>
</div>
I had to split the error message into a nested component to improve performance:
<sqx-errors-messages [errorMessages]="snapshot.errorMessages" *ngIf="snapshot.errorMessages.length > 0"></sqx-errors-messages>