Задать вопрос

Почему Angular 5 очень медленный?

Пытаюсь ускорить работу Angular-приложения.

Алгоритм такой:
Есть корневой компонент, в котором в router-outlet выводятся дочерние компоненты. На дочернем компоненте по-умолчанию выводятся заказы. Событие клика по заказу - (click)="orderClick(order)"
В функции orderClick выполняется некоторая работа и далее вызывается функция сервиса редактора заказов
this.editor.getShow(...);
В функции getShow выполняется некоторая работа и вызывается
this.router.navigate(['\ordereditor']);
Этот код делает дочерним компонентом редактор заказов. Для чистоты эксперимента он пуст и содержит только ngAfterContentInit и ngAfterViewInit, внутри которых только console.time.

Проблема заключается в том, что на служебные функции уходит неоправданно много времени. Внутри каждой функции установлен console.time на входе и на выходе. Перед вызовом this.router.navigate и первой строчкой в конструкторе компонента который вызывается так же и console.time. В ngAfterContentInit и ngAfterViewInit выглядят так
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);
    }


На Firefox открытие пустого компонента занимает 80-100мс, в хроме - 30-50 мсек, в хроме на планшете 250-500 мсек.
При этом подавляющее большинство времени уходит на непонятную служебную работу по отображению пустого компонента. Вот как выглядит измерение производительности в хроме на планшете.

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


Полезная работа - click и get show, при этом total time - около 15 мсек, что происходило остальные 260 мсек?
Компилирую для теста так:
ng build --prod --output-hashing=none
Что не так с ангуларом? Почему работает так медленно и как это исправить?
  • Вопрос задан
  • 1063 просмотра
Подписаться 5 Простой Комментировать
Решения вопроса 2
@kacheleff
fullstack developer
вот здесь есть чеклист с советами по ускорению ангуляра
здесь хороший доклад на русском по ускорению работы ангуляр-приложений
Ответ написан
Комментировать
@kulaeff
Front-end developer
Я хз что там с ангуляром, но пора бы научиться пользоваться консолью, в частности, вкладкой Performance. Отличная штука. На этой вкладке вы увидите всю подноготную, все, так сказать, кишки, в том числе функции, на выполнение которых уходит много времени.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы