AngularJS
Профилирование производительности

Все о профилировании

Что такое профилирование?

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

Почему это необходимо?

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

Инструменты и методы:

1. Встроенные инструменты разработчика Chrome

   Это включает в себя полный набор инструментов для профилирования. Вы можете углубиться в поиск узких мест в вашем файле javascript, css-файлах, анимациях, потреблении процессора, утечке памяти, сети, безопасности и т. Д.

   Сделайте запись временной шкалы и посмотрите подозрительно долгое событие «Оценить сценарий». Если вы их найдете, вы можете включить JS Profiler и повторно записать свою запись, чтобы получить более подробную информацию о том, какие функции JS были вызваны и сколько времени они занимали. Прочитайте больше...

2. FireBug (использование с Firefox)

3. Dynatrace (использование с IE)

4. Batarang (использование с Chrome)

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

5. Наблюдатель (используйте с Chrome)

   Хороший и упрощенный пользовательский интерфейс, чтобы подсчитать количество наблюдателей в приложении «Угловое».

6. Используйте следующий код, чтобы вручную узнать количество наблюдателей в вашем угловом приложении (кредит на @Words Like Jared Количество наблюдателей )

(function() {
    var root = angular.element(document.getElementsByTagName('body')),
        watchers = [],
        f = function(element) {
        angular.forEach(['$scope', '$isolateScope'], function(scopeProperty) {
            if(element.data() && element.data().hasOwnProperty(scopeProperty)) {
                angular.forEach(element.data()[scopeProperty].$$watchers, function(watcher) {
                watchers.push(watcher);
                });
            }
        });

        angular.forEach(element.children(), function(childElement) {
            f(angular.element(childElement));
        });
    };
 
    f(root);
 
    // Remove duplicate watchers
    var watchersWithoutDuplicates = [];
    angular.forEach(watchers, function(item) {
        if(watchersWithoutDuplicates.indexOf(item) < 0) {
            watchersWithoutDuplicates.push(item);
        }
    });
    console.log(watchersWithoutDuplicates.length);
})();

7. Существует несколько онлайн-инструментов / веб-сайтов, которые облегчают широкий спектр функций для создания профиля вашего приложения.

   Один из таких сайтов: https://www.webpagetest.org/

   С помощью этого вы можете запустить бесплатный тест скорости сайта из нескольких мест по всему миру с использованием реальных браузеров (IE и Chrome) и на реальных скоростях подключения к потребителю. Вы можете запускать простые тесты или выполнять расширенное тестирование, включая многошаговые транзакции, захват видео, блокирование контента и многое другое.

Следующие шаги:

Выполнено с профилированием. Это только приведет вас на полпути вниз по дороге. Следующей задачей является фактическое превращение ваших данных в элементы действия для оптимизации вашего приложения. Посмотрите эту документацию о том, как вы можете улучшить производительность своего углового приложения с помощью простых трюков.

Счастливое кодирование :)