Отладка производительности angular 2

#angular

#angular

Вопрос:

Я заметил, что мое приложение angular 2 становится немного вялым. Например, время между нажатием кнопки (которая устанавливает некоторое состояние) и отображением результата (на основе этого значения состояния) имеет некоторую задержку (~ 1 сек). Я подозреваю, что есть некоторые проблемы с производительностью в некоторых методах, которые вызываются во время каждого цикла обнаружения изменений.

Кто-нибудь может дать рекомендации по:

1) Как определить, сколько времени занимает каждый цикл обнаружения изменений?

2) Как точно определить те вызовы методов, которые в значительной степени способствуют задержке?

Спасибо.

Комментарии:

1. Вероятно, вы можете определить узкие места, просто взглянув на свой код. Какие-либо HTTP-вызовы? Руководство detectChanges() ? Длительные вычисления? Огромные массивы, отображаемые с *ngFor вместо нумерации страниц? В противном случае проблем действительно быть не должно.

Ответ №1:

В инструментах разработчика в Chrome, на панели «Профили», вы можете запустить тип профилирования Record JavaScript CPU Profile , который будет записывать время выполнения функций, и это должно помочь вам определить, какие функции в наибольшей степени способствуют задержке вашего приложения.

Обновить

Эта функция теперь находится на панели «Производительность» начиная с Chrome 58. Откройте панель «Производительность» и щелкните значок «Запись», чтобы начать профилирование страницы. кнопка записи на вкладке Производительность

На этой вкладке есть другие типы профилей, которые также должны вам помочь. Вот ссылка, которая поможет проанализировать профиль Chrome, созданный при остановке записи. Аналогичная функциональность также существует в Internet Explorer.