Как проверить скорость рендеринга в угловой

мы создаем Угловое приложение, и мы пытаемся выяснить, как получить некоторые ориентиры о том, сколько времени требуется для рендеринга различных страниц. Я читал о performance.timing здесь, но это, кажется, полезно только с приложениями без одной страницы, так как при переходе к новым представлениям в нашем приложении номера синхронизации не меняются.

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

любой идеи о том, как получить некоторую информацию о времени для представлений в угловом приложении?

изменить:

более конкретно, вы идете к маршруту, который загружает большой список ng-repeat (который не является оптимальным для производительности), и окно имеет длительную задержку, прежде чем оно фактически отображает элементы в списке. Мы хотели бы посмотреть, сколько времени потребуется, чтобы перейти от большого пустого представления к визуализации элементов в списке.

7
angularjs javascript performance performance-testing

3 ответов

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

сценарий:

  1. маршрут к странице в угловом приложении
  2. сделать AJAX-вызов, чтобы получить длинный список элементов
  3. возьмите список предметов, перейдите в ng-repeat ul
  4. просмотр списка визуализации

в угловом приложении,ng-repeat является печально известным убийцей производительности, но это чрезвычайно удобный. вот обсуждение производительности и здесь.

предположим, что мы хотим получить приблизительное время, необходимое для получения от #3 до #4, поскольку тестирование производительности вызова AJAX довольно просто.

вот некоторый контекст:

<ul>
  <li ng-repeat="item in items">
    {{item.name}}
    <!-- More content here -->
  </li>
</ul>

и внутри углового регулятора:

// Get items to populate ng-repeater
MyApiService.getItems(query)
  .then( function (data) {
    $scope.items = data;
    // When callback finishes, Angular will process items
    // and prepare to load into DOM
  }, function (reason) {
    console.log(reason);
  });

события, упомянутые @runTarm,$routeChangeStart, $routeChangeSuccess и $viewContentLoaded огонь, как только маршрут загружено, но до того, как DOM отображает элементы, поэтому они не решают проблему. Однако, экспериментируя, я обнаружил, что как только обратный вызов AJAX заканчивается и устанавливает $scope.items, Angular начинает блокирующую операцию обработки items и подготовке ng-repeat ul для вставки в DOM. Таким образом, если вы получите время после завершения вызова AJAX и получите время снова в setTimeout указанный в обратном вызове,setTimeout обратный вызов будет поставлен в очередь, чтобы ждать, пока угловой не будет сделан с повторитель процесса и получить вам время за долю секунды до DOM рендеринга, что дает вам самое близкое приближение для времени рендеринга. Это не будет фактическое время рендеринга, но медленная часть для нас-это не работа DOM, а угловая, которую мы хотим измерить.

вот пересмотренный пример:

// Get items to populate ng-repeater
MyApiService.getItems(query)
  .then( function (data) {
    var start = new Date();
    $scope.items = data;
    // When callback finishes, Angular will process items
    // and prepare to load into DOM
    setTimeout( function () {
      // Logs when Angular is done processing repeater
      console.log('Process time: ' + (new Date() - start));
    }); // Leave timeout empty to fire on next tick
  }, function (reason) {
    console.log(reason);
  });
7

TypeScript / Angular (2+) Ответ:

чтобы проверить время, затраченное на угловую визуализацию дерева компонентов, измерьте до и после обнаружения изменений. Это будет время, сколько времени потребуется Angular для создания всех дочерних компонентов и оценки ngIfs/ngFors etc.

иногда, когда выполняется обнаружение изменений, ничего не изменится, и временной интервал будет небольшим. Просто посмотрите на самый длинный интервал времени, и это, вероятно, где вся работа событие. Кроме того, для этого лучше всего использовать стратегию обнаружения изменений OnPush. См.http://blog.angular-university.io/onpush-change-detection-how-it-works/

объявите эту утилиту таймера над вашим @Component({...}) class :

class Timer {
  readonly start = performance.now();

  constructor(private readonly name: string) {}

  stop() {
    const time = performance.now() - this.start;
    console.log('Timer:', this.name, 'finished in', Math.round(time), 'ms');
  }
}

добавить внутри компонент класс:

private t: Timer;

// When change detection begins
ngDoCheck() {
  this.t = new Timer('component 1 render');
}

// When change detection has finished:
// child components created, all *ngIfs evaluated
ngAfterViewChecked() {
  this.t.stop();  // Prints the time elapsed to the JS console.
}

отметим, что Угловое перевода отдельная рендеринг браузера (живопись) на экране. Это тоже требует времени. Когда вы видите javascript (желтый) с большим количеством вызовов" checkAndUpdateView "и" callViewAction " в инструменте хрома Timeline (консоль разработчика javascript -> производительность -> Запись), Что происходит угловой рендеринг. Когда вы видите фиолетовый цвет в инструменте хрома Timeline с надписью "рендеринг", это фактический рендеринг браузера.

1

попробуйте плагин Chrome с открытым исходным кодом Angular-performance, вы можете контролировать время дайджеста в угловых приложениях:https://github.com/Linkurious/angular-performance

0