Статистика времени загрузки страницы

#angular

Вопрос:

Я использую Angular 6 и пытаюсь отслеживать статистику времени загрузки страницы (начиная с 1-го асинхронного вызова / рендеринга DOM до конца последнего асинхронного вызова / рендеринга DOM). Есть ли какой-либо способ из Angular prospective достичь этого?

Я пробовал с process.timing, но, похоже, он не дает правильного времени загрузки. Есть идеи, как отследить это общее время загрузки страницы?

1. Разве инструменты разработчика не помогают?

2. на самом деле мне нужно это время загрузки для целей отчетности / статистики, поэтому нужно сохранить в базе данных.

Ответ №1:

Вы можете попытаться получить текущую дату перед загрузкой любого другого скрипта и получить текущую дату еще раз, когда приложение angular перейдет в фазу запуска. Если вычесть обе даты, то получится время загрузки.

Я имею в виду что-то вроде этого:

 <script type="text/javascript">
    var start = Date.now();
</script>

И затем, когда вы реализуете логику контроллера, добавьте что-то вроде этого:

 run(function($window) {
    result = Date.now() - $window.start);
    console.log(result); 
});

1. каким был бы правильный жизненный цикл / фаза для Angular 6?

2. Фазами жизненного цикла (также называемыми перехватами) в Angular являются: конструктор ngOnChanges, ngOnInit, ngDoCheck -> ngAfterContentInit -> ngAgterContentChecked -> ngAfterViewInit -> ngAfterViewChecked, ngOnDestroy Дополнительная информация: angular.io/guide/lifecycle-hooks Что-то вроде этого должно выполнить эту работу. angular.module(‘приложение’, []). конфигурация(функция() { // некоторый код }). выполнить(функция ($window) { результат = Date.now() — $window.start); консоль.журнал (результат); });

3. Я полагаю, что мы можем рассмотреть перехват жизненного цикла «ngAfterViewChecked», но проблема в том, что он вызывается так много раз, и я понятия не имею, в каком вызове была завершена загрузка всей страницы!

Ответ №2:

Наилучшей практикой было бы использовать APP_INITIALIZER для инициализации глобальной переменной времени

Наилучшей практикой было бы поместить вашу логику синхронизации завершения в ngAfterViewInit и не помещать бизнес-логику в ngAfterViewChecked

ngAfterViewChecked() будет вызываться каждый раз, когда в DOM-дереве происходят какие-либо изменения. Это сделано специально.

Используйте ngAfterViewInit, чтобы получить разницу во времени и повторно инициализировать глобальную переменную

1. Я думаю, что к моменту запуска перехвата жизненного цикла «ngAfterViewInit» мы не можем сказать, что все вызовы сервера завершены!

2. @Ratikant да, это правда, и очевидно, что вам нужно проверять время выполнения всех вызовов сервера.