Пытаюсь ускорить работу 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
Что не так с ангуларом? Почему работает так медленно и как это исправить?
