A
A
Andrew2018-03-17 17:31:39
JavaScript
Andrew, 2018-03-17 17:31:39

Why is Angular 5 very slow?

I'm trying to speed up an Angular application.
The algorithm is as follows:
There is a root component in which child components are displayed in the router-outlet. Orders are displayed on the child component by default. Order click event - (click)="orderClick(order)"
Some work is done in the orderClick function and then the order editor service function is called
this.editor.getShow(...);
In the getShow function some work is done and called This code makes the order editor a child component. For the purity of the experiment, it is empty and contains only ngAfterContentInit and ngAfterViewInit, inside of which there is only console.time. Problem
this.router.navigate(['\ordereditor']);
is that the service functions take an unreasonably long time. Within each function, console.time is set on entry and exit. Before calling this.router.navigate and the first line in the constructor of the component that is also called console.time. In ngAfterContentInit and ngAfterViewInit look like this

ngAfterContentInit() {
        console.timeEnd("constructor"); // Для измерения задержки между созданием конструктора и переходом сюда
        console.time("ngAfterContentInit");
        setTimeout(() => {
            console.timeEnd("ngAfterContentInit");
        },
            0);
    }

    ngAfterViewInit() {
        console.time("ngAfterViewInit");
        setTimeout(() => {
            console.timeEnd("ngAfterViewInit");
            console.timeEnd("total time"); // Полное время - от начала клика и до этого места
        },
            0);
    }

On Firefox, opening an empty component takes 80-100ms, on chrome it takes 30-50ms, on chrome on a tablet it takes 250-500ms.
At the same time, the vast majority of time is spent on incomprehensible housekeeping work on displaying an empty component. Here's what performance measurement looks like in chrome on a tablet.
click: 0.165771484375ms
get show: 15.595947265625ms
navigate: 49.48779296875ms
constructor: 14.7900390625ms
[Violation] 'click' handler took 160ms
ngAfterContentInit: 130.77294921875ms
ngAfterViewInit: 126.493896484375ms
total time: 287.324951171875ms

Useful work - click and get show, while the total time is about 15 ms, what happened the other 260 ms?
I compile for the test like this:
ng build --prod --output-hashing=none
What's wrong with Angular? Why is it running so slowly and how can I fix it?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Sergey Epifanov, 2018-03-18
@byte916

here is a checklist with tips on speeding up angular
here is a good report in Russian on speeding up angular applications

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question