Angular приложение и стимуляция его производительности


Содержание материала:

Как повысить производительность загрузки приложений Angular2?

50 AngularM [2020-11-30 20:34:00]

Angular2 приложение медленно загружается, как я могу повысить производительность при загрузке?

Я использую Angular2, typescript с html5.

В настоящее время мое приложение занимает 4 секунды для загрузки. Я принимаю Firebase и использую cloudflare.

Вещи, которые я делаю/информация:

  • Я сжал изображения.
  • Я сокращаю css
  • Я уменьшаю js.
  • Я использую async для своих скриптов.
  • Мои сценарии находятся в моем.
  • Скрипты около 700kb
  • Я использовал тест скорости Google и получил 65%
  • Я использовал сокращенную версию libs, которую я использую, например. бутстрап и т.д.
  • Использование systemjs.
  • Это приложение для семян im, использующее: https://github.com/mgechev/angular-seed

Поток:

Когда приложение загружается, отображается синий экран (это загрузочный css), а затем через 4 секунды приложение загружается и работает очень быстро. Но требуется 4 секунды для загрузки. Кажется, что файл app.js, который минимизирует systemjs, замедляет работу всего приложения, а также не показывает представления достаточно быстро.

Это мой сайт:

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

performance javascript angular systemjs angular2-routing

5 ответов

8 Решение Tim Consolazio [2020-11-30 20:45:00]

Как насчет «расщепления кода».

С сайта Webpack:

«Для больших веб-приложений неэффективно помещать весь код в один файл, особенно если некоторые блоки кода нужны только при определенных обстоятельствах. В Webpack есть функция разделить вашу кодовую базу на» куски «, которые загружаются по требованию Некоторые другие связки называют их» слоями «,» накопителями «или» фрагментами «. Эта функция называется» разделение кода».

Обратите внимание, что CLI Angular использует Webpack.

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

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

У меня также была такая же проблема, и моя команда оптимизировала наш проект от загрузки через 8 секунд до 2 секунд, используя следующие методы.

Ленивая загрузка модуля:. Ленивые модули загрузки помогают уменьшить время запуска. При ленивой загрузке нашему приложению не нужно загружать все сразу, ему нужно только загрузить то, что пользователь ожидает увидеть, когда приложение загружается первым. Модули, которые лениво загружаются, загружаются только тогда, когда пользователь переходит к своим маршрутам. Angular2 представил модули в своем окончательном релизе RC5. См. ниже шаг за шагом.

Компиляция Aot: В AoT браузер загружает предварительно скомпилированную версию приложения. Браузер загружает исполняемый код, чтобы он мог визуализировать приложение немедленно, не ожидая, чтобы сначала скомпилировать приложение.

Он уменьшает размер полезной нагрузки: нет необходимости загружать компилятор Angular, если приложение уже скомпилировано. Компилятор составляет примерно половину самого Angular, поэтому его отсутствие значительно снижает полезную нагрузку приложения. Для получения дополнительной информации см. this.

Webpack: Webpack — популярный модуль-пакет, инструмент для связывания исходного кода приложения в удобных кусках и для загрузки этого кода с сервера в браузер. Вы можете настроить веб-приложение Angular 2 с помощью webpack (см. это руководство).

Удалить скрипты, таблицу стилей из index.html: Удалить все сценарии и таблицы стилей, которые не нужны в index.html. Вы можете динамически загрузить эти script в самом компоненте, вызвав службу.

Сделайте файл script.service.ts, который может загрузить любой script по запросу для этого компонента

Это всего лишь образец кода для динамического загрузки script, вы можете настроить его и оптимизировать самостоятельно в соответствии с вашими потребностями. Для таблицы стилей вы должны загрузить ее в компоненте с помощью styleUrl.

Использовать кеширование браузера: Файлы вашей веб-страницы будут храниться в кеше браузера при использовании кеширования браузера. Ваши страницы будут загружаться намного быстрее для повторных посетителей, а также другие страницы, которые будут использовать те же ресурсы. Для получения дополнительной информации https://varvy.com/pagespeed/leverage-browser-caching.html

минимизировать код в app.component.ts: свести к минимуму код, присутствующий в app.component.ts, который всегда запускается, когда приложение загружается или перезагружается.

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

Постепенная загрузка модулей шаг за шагом

Модульная структура:. Мы должны разделить наше приложение на отдельные модули. Например, приложение может иметь пользовательскую сторону и административную сторону, и каждый из них будет иметь свои собственные компоненты и маршруты, поэтому мы разделим эти две стороны на модули admin.module.ts и user.module.ts.

Корневой модуль: Каждое приложение Angular имеет класс корневого модуля. По соглашению это класс под названием AppModule в файле с именем app.module.ts, этот модуль будет импортировать два вышеуказанных модуля, а также AppComponent для начальной загрузки. Вы также можете объявить несколько компонентов в соответствии с вашими потребностями. Пример кода в app.module.ts:

  1. Маршруты: Теперь на ваших маршрутах вы можете указать следующие

Теперь, когда приложение загружается, оно будет загружать только код LoginComponent и AppComponent. Эти модули будут загружаться только при посещении /admin или/пользовательских маршрутов. Следовательно, это уменьшит размер полезной нагрузки для загрузки в браузер, что приведет к быстрой загрузке.

  1. Вложенные модули:Так же, как app.module, каждый модуль имеет свой собственный набор компонентов и маршрутов. По мере того как ваш проект становится больше, вложенность модулей внутри модуля — лучший способ оптимизации, потому что мы можем лениво загружать эти модули всякий раз, когда нам нужно.

ОБРАТИТЕ ВНИМАНИЕ

Выше код предназначен только для объяснения, пожалуйста, обратитесь к полному примеру https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

5 brando [2020-12-06 09:23:00]

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

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

Вот основные вещи, которые вы можете сделать, чтобы оптимизировать проект ng2 для производства:

1) Вперед времени (AoT) Компиляция — Объединение/Минирование/Встряхивание деревьев

Послушайте, забудьте о головной боли, чтобы настроить кучу задач глотки, чтобы выполнить все эти вещи. Ручки углового-cli Bundling/Minification/Tree-shaking/AOT-компиляция за один простой шаг:

Это создаст следующие js файлы в вашей папке «dist»:

Угловая компиляция AOT автоматически сделает «дрожание дерева» на вашем коде и избавится от любых неиспользуемых ссылок. Например, вы можете использовать lodash в своем проекте, но вы, вероятно, используете только несколько функций lodash; встряхивание деревьев урезает все неиспользуемые части lodash, которые не нужны в вашей окончательной сборке. И самое главное, компиляция AOT предварительно скомпилирует весь ваш код и представления, что означает МЕНЬШЕЕ время, когда браузеру нужно будет запустить приложение ng2. Нажмите здесь для получения дополнительной информации об угловой компиляции AOT.

2) ленивые загрузочные части вашего приложения. Если вы продолжите свое приложение в разных частях, вам не нужно загружать ВСЕ, когда ваше приложение загружается первым. Вы можете указать разные модули для своего приложения, которые затем могут быть объединены (компилятором angular-cli aot) в разные куски. Прочтите здесь, чтобы узнать, как организовать проект в модули, которые вы можете скомпилировать в патроны, которые загружаются только как НЕОБХОДИМЫЕ. Angular-cli будет управлять созданием этих кусков для вас.

3) Угловой универсальный Теперь, если вы действительно хотите сделать свое время загрузки ЧРЕЗВЫЧАЙНЫм быстрым, тогда вы захотите рассмотреть возможность внедрения Angular Universal, которая заключается в том, когда вы скомпилируете свой первоначальный вид на сервере. Я не использовал Angular Universal, так как мне удалось достичь быстрого времени загрузки с шагом 1 и 2. Но это захватывающий вариант в наборе инструментов ng2. Имейте в виду, что вы не компилируете или не запускаете приложение ng2 на сервере, вы компилируете начальное представление серверов, так что пользователь быстро получает толчок html, и, таким образом, пользователь ПЕРЕДАЕТ время загрузки очень быстро (даже при полной загрузке будет по-прежнему немного отставать). Этот шаг не устраняет необходимость в других шагах. В качестве бонуса, Angular Universal также должен помочь в SEO.

4) Вторичное связывание

Если я не использую ленивую загрузку, я обычно буду продолжать собирать дистрибутивные файлы, созданные из компиляции AOT. Таким образом я создаю один main.bundle.js файл concats inline.js, vendor.js и main.js файлы. Для этого я использую глоток.

2 dimson d [2020-04-22 13:18:00]

потому что его SPA и angular 2 init слишком медленны. это оно. плюс RXjs, тонны полифилов и т.д. AOT может помочь, но многие из angular2 libs не работают с ним. angular универсальная помощь помогает

Попробуйте отключить исходные карты, запустив ng serve —sourcemap=false

Stepan Suvorov Blog

Release 2.0

Оптимизируем AngularJS. Подробный разбор.

Вольный перевод статьи “Improving Angular web app performance example“. Трактат довольно фундаментальный. Большая часть методик оценки производительности подойдет для любого веб-приложения (не только AngularJS).

Состоит из следующих разделов:

Как только необходимая функциональность вашего AngularJS приложения готова, следующий шаг – работа над производительностью, то есть: начальное время загрузки, отзывчивость к действиям пользователя: приложение должно работать быстро не заставляя пользователя ждать, иначе оно будет не очень удобным. Существую множество различных советов по повышению производительности, например: Steven Czerwinksi в своем посте “Optimizing AngularJS: 1200ms to 35ms” предлагает следующие шаги:

  • кеширование DOM элементов
  • сокращение количества вотчеров
  • отложенное создание элемента
  • пропускать вотчеры спрятанных элементов

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

  • Индивидуальная функциональность
    • оптимизировать очевидные узкие места на JavaScript (не AngularJS)
  • Оценить и оптимизировать холостые проходы цикла дайджеста
    • удалить ненужные фильтры (тем самым сократив количество вотчеров)
    • удалить ненужные вотчеры переходом от двунаправленого связывания к одностороннему
  • Проанализировать все места обновления DOM
    • тяжелые операции могут быть разбиты на более простые модули
    • некоторые манипуляции могут быть сделаны за чет вебворкеров
  • Минимизировать события по сборке мусора
    • Повторно использовать память вместо выделения новой

Пример не оптимизированного приложения

В примере используется AngularJS 1.2, но техники профилирования приложения и нахождения “узких мест” могут быть применимы так же и для последующих версий.

Для примера я написал небольшое AngularJS приложение( исходный код доступен тут). Весь пример помещен в index.html файл, который может быть открыт в браузере (то есть веб сервер для запуска не нужен). Задача приложения – вычислить N простых чисел. Начнем мы с крайне неэффективной реализации и шаг за шагом будем улучшать ее.

Разворачиваем приложение локально:

Откроем index.html . Страница выглядит очень просто: пользователь вводит желаемое число простых чисел и нажимает “Find”. После чего числа вычисляются и выводятся в таблицу:

Таблица содержит фильтры и порядок, чтобы показывать проблемы производительности с ними связанные.

Первый 5 простых чисел выглядят так:

Поверхностная оценка производительности

Первоначальная версия довольно быстро находит первые 10 или даже 100 простых чисел. Но если попробовать найти 1000, то обязательно приложение начнет тормозить. Откуда такие тормоза?

Код AngularJS приложения довольно простой:

метод $scope.find выполняется очень долго для большого значения $scope.n . Обычно мы начинаем профилирование JavaScript вот так:

Я предпочитаю console.time – что позволяет использовать меньше дополнительных переменных.

для 1000 у меня выдало

То есть расчет занял 13 секунд!

Профилирование в Chrome с использованием сниппетов

Вместо того, чтобы править код и вставлять метки времени, я использую ng-profile-scope-method сниппет (о сниппетах можно почитать тут). В этом методе зафиксированы id элемента и имя анализируемого метода (в нашем случае это “find“, но вы можете их легко поменять профилируя другое приложение).

Запускаем сниппет, нажимаем на “Find”, смотрим результаты:

Когда метод закончит работу, мы можем перейти во кладку Profiles и посмотреть загруженность процессора в момент выполнения метода. Начнем разбор с представления “Chart“:

Отметим, что стек вызовов тривиален: функция обработчика события выполняется всего один раз за эти 13 секунд, так же как $apply , $eval и так до $scope.find . Внутри нашего метода find мы видим множественные вызовы к функции findPrime . Давайте посмотрим является ли findPrime “узким местом” для производительности.

Переключимся из предстваления “Chart” в “Heavy“. Оно показывает функции, расположенные в порядке убывания по времени выполнения.

В топе мы видим 2 функции – isPrime и findPrime , которые выполняются дольше всех. Обратите внимание на желтый треугольничек рядом с isPrime . Если вы наведете на него мышкой, то увидите всплывающую подсказку о том, что метод не может быть оптимизирован компилятором “на лету“. В данном случае это из-за try-catch , который находится внутри функции.

В нашем случае isPrime не требует try-catch блока совсем:

Уберем его и запустим профайлер еще раз:

после чего мы видим как время выполнение isPrime с 7.2 секунд упало до 40 миллисекунд, а общее время выполнения с 13 до 5,8 секунд. Сниппет позволяет сохранять профили для разных запусков отдельно, что дает нам возможность сравнить их.

Итак, findPrime – наша новая цель для оптимизации. Давайте посмотрим на исходник:

Функция ищет N-ое простое число по средством вычисления всех предшествующих и возвращает последнее. Но при этом для нахождения следующего (N + 1) числа она проделает все сначала. Давайте попробуем использовать ранее найденые простые числа вынеся массив foundPrimes за пределы функции:

Изменения (тег step-2) приводят к серьезному скачку производительности:

Теперь весь метод $scope.find выполняется за 389 мс, то есть скорость по сравнению с первоначальным вариантом увеличилась более чем в 40 раз!

Мы можем сделать еще одну простое изменение с целью оптимизации функции isPrime : тут больше вопрос математики – проверяя N на простоту, нам не нужно проверять остаток от деления на все простые числа идущие до него – достаточно дойти до корня из N:

Обновить код можно перейдя к тегу step-3. Профайлер $scope.find показывает что мы избавились от всех явных тормозов:

Оптимизация цикла дайджеста

Теперь можем переходить к профилирования метода объекта scope . Чтобы точно выявить слабые места, сделаем оценку на более серьезном объеме входных данных. Но сначала я добавлю небольшую деталь: вывод количества простых чисел (изменение в теге step-4):

Давайте попробуем сгенерировать 100 000 простых чисел. Это займет несколько секунд ( обновления DOM). Как только 100 000 простых чисел будут выведены на экран, попробуйте поменять количество (например: удалить один ноль). Обратите внимание на существенную задержку после нажатия на кнопку и обновления данных. Мы не модифицируем данные модели, только одно число. Таблица не должна обновляться, откуда задержка?

Чтобы отдебажить эту проблему давайте используем другой сниппет – ng-idle-apply-timing (опять таки ничего не изменяя в коде). Он покажет сколько времени занимает грязная проверка (dirty checking) каждой переменной в нашем приложении. Двойное связывание, $watch выражения и фильтры – все это делает проход цикла дайджста более медленным.

Взглянем что получилось в профайле:

Мы видим, что только на цикл дайджеста уходит больше секунды (1274 мс). Хотелось бы это исправить. Самый надежный способ ускорить работу дайджеста – повыкидывать ненужные вотчеры.

Для начала посмотрим на элементы с самыми медленными вотчерами. Используем еще 2 сниппета: сначала ng-profile-local-digest.js, после чего – ng-find-expensive-digest.js (так исторически сложилось, что второй требует метод, который определяется в первом). Просто запустите их один за одним. И у нас в консоли появится вспомогательный метод findExpensiveDigest , который можем выполнить для таблицы и поля ввода:

Используем сниппет – ng-count-watchers, чтобы посчитать общее количество вотчеров. Можете убедиться, что для случая с 100 000 простыми числами в приложении появляется аж 500 003 вотчеров! Из них 3 – обслуживают ng-repeat, вводимое значение и число в шаблоне. Остальные ( 500 000) занимаются наблюдением в ячейках таблицы:

Обратим внимание, что для каждой строчки используются избыточные фильтры. Например: << "index" | lowercase >> – это статический текст, который никогда не меняется, но Ангуляр вычисляет его снова и снова, а результаты всегда одни и те же, даже когда количество строк меняется. Давайте удалим фильтры lowercase , uppercase , isPrime , которые по сути ничего не делают(можно обновиться до тега step-5):

Обновленное приложение содержит уже только 200 003 вотчеров, и соотвественно цикл дайджеста проходит в 2 раза быстрее.

Использование директивы bind-once

Производительность уже серьезно была улучшена удалением ненужных фильтров, но мы можем ускорить еще. Отметим то, что в то время, как таблица не меняется, мы продолжаем вычислять 2 вотчера на каждую строчку, каждый раз, когда мы меняем значение поля ввода( что запускает цикл дайджеста). Данные не изменяются, поэтому мы не должны вычислять выражение еще раз. Angular1.3 представляет “одноразовое связывание” следующим синтаксисом << ::prime>> . Но AngularJS 1.2 “из коробки” такого увы не предоставляет. Как вариант можно использовать модуль bindonce: изменения незначительны; фильтры также поддерживаются:

Обновленное приложение имеет только 3 вотчера (после отображения 100 000 простых чисел), и цикл дайджеста занимает в этом случае только 5мс. Ну что ж это уже похоже на отзывчивый интерфейс.

Обновить код можно по тегу step-6. И не забудьте поставить модуль bindonce:

Избавляемся от ng-repeat

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

Чтобы как-то улучшить эту часть, я написал свою функцию генерирования HTML и вывод его просто через innerHTML . То есть выкидываем ng-repeat вместе с содержимым (тег step-7):

Такое изменение дало увеличение производительности в 10 раз:

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

Ускоряем начальный рендеринг

Давайте подойдем к проблеме с другой стороны: если процесс вычисления всех результатов занимает много времени, то мы можем показать только первоначальные результаты, и сделать это довольно быстро. То есть пользователь увидит какие-то результаты, в то время как остальные все еще будут рассчитываться. Мы можем вычислить и вывести первые 100 чисел очень быстро ( $timeout сервис:

Главный вычислительный метод $scope.find теперь создает большую цепочку промисов, которые будут выполнятся один за одним. И на каждом шаге будет вычислено 50 простых чисел, сгенерирован HTML и добавлен в DOM:

Изменения кода доступны в теге step-9.

Посмотрим на результаты профилирования:

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

Но мы также можем заметить, что обновления постепенно замедляются. Фиолетовый столбик(отрисовка) становится все больше и больше с каждым разом.

Проблема в способе добавления новых строк в таблицу: каждый раз при добавлении браузеру приходиться перерисовывать всю таблицу!

Вместо замены всего содержимого таблицы мы можем создавать новую таблицу и просто добавлять ее в структуру документа ( Мы так же можем добавлять другой элемент tbody в ту же самую таблицу. Но этот вариант не оценивался )

Обновленния берем в теге step-10.

Ну вот мы и добились 30fps. Что означает, что мы можем прокручивать и смотреть результаты относительно без тормозов, в то время как браузер продолжает вычислять оставшиеся результаты.

Перекладываем вычисления на WebWorkers

В итоге, я решил вынести вычисление простых чисел в поток вебворкеров, чтобы выполнять параллельно с основным кодом. Перемещаем isPrime и findPrime методы в файл primes.js . Они будут общаться с основным кодом по средством сообщений:

Чтобы упростить взаимодействие с вебворкерами, я создал сервис:

Метод $scope.find должен обрабатывать вычисления асинхронно, поэтому

Код доступен по тегу step-11.

!Внимание: Для загрузки вебворкеров нам понадобится локально запустить веб-сервер. Могу порекомендовать http-server. Устанавливает и запускается очень просто(команды выполняем из директории проекта):

Профилирования процессора теперь показывает приятные узкие столбики для основного кода:

Временной график показывает, что все выполняется быстрее и почти все итерации попадают под 60fps:

Оптимизация процесса выделения памяти

Если наше приложение в процессе выполнения занимает и освобождает много памяти, то браузер должен переодически останавливаться, чтобы собрать освободившуюся память. Задержки при сборке мусора непредсказуемы и могут быть долгими. Чтобы найти этим события(сборка мусора) на временном графике включите фильтр и введите “gc” (garbage collection). В нашем случае мы видим серьезные задержки по сборке мусора: несколько мегабайт освобождаются каждый раз и это занимает более чем 100мс. (Для теста я генерировал 150 000 простых чисел порциями по 10 000). Это заметно не вооруженным взглядом, если вы включите график работы с памятью (галочка “Memory”):

Первый кандидат на освобождение памяти – массив $scope.primes . Отметим, что он растет динамически, потому что он начинается с размерности 0 и мы продолжаем добавлять новые простые числа в массив одно за одним:

Это очень не эффективно с точки зрения выделения памяти: когда новый элемент добавляется в непустой массив, среда выполнения выделяет память под новый массив (обычно выделяется в 2 раза больше памяти), скопировать числа и почистить память за исходным. Я изменил код задав массив необходимой длинны с самого начала (используя заданное количество простых чисел):

Обновляемся из тега step-12.

Теперь временной график показывает не такие серьезные скачки в памяти:

Примечание: иногда профайлер барахлит и нужно закрыть все и открыть заново.

Изоляция профиля памяти

Чтобы лучше увидеть выделение памяти давайте изолируем конкретные шаги. Для начала давайте выключим генерацию DOM – она создает много “шума” на графике при размещении элементов.

Теперь мы можем запустить профайлер выделяемой памяти, а не профайлер процессора. Включаем профайлер и затем нажимаем кнопку “Find”:

После чего мы можем увидеть выделение памяти под большие массивы с начала. (прим.: можем навести мышкой, чтобы увидеть конкретные значения). Также можно отметить что общий размер памяти 600 008 байт (при генерации 150 000 простых чисел). Движок V8 обнаружил что мы добавляем только целые числа в массив, поэтому используется только 4 байта на элемент. Массив также имеет свойство length – эти дополнительные 8 байт.

Этот профиль дает нам представление о выделении памяти из основного кода, но он не показывает выделение памяти в вебворкерах. Изучить утечки памяти в вебворкерах выберите “primes.js” перед стартом профилирования памяти

Собраный профиль веделения памяти на вебворкерах менее детален из-за браузерных ограничений. Но мы все равно можем четко увидеть растущее выделение памяти. Если посмотрим детально – обнаружим массив foundPrimes :

Для массива foundPrimes мы так же можем сразу выделить необходимое количество памяти (тем самым предотвращая постоянное изменение размера и сборку мусора).

Вычисление только по запросу

Давайте изменим способ генерации данных приложением. Вместо предвычислений тысяч простых чисел, сгенерируем небольшую часть чисел и отрисуем таблицу. Если пользователь прокрутит до конца таблицы в поисках большего количества чисел, мы сгенерируем новую партию чисел и добавим их в DOM. Можно легко привязать генерацию к прокрутке используя директиву ngInfiniteScroll. Для этой директивы нам понадобится также подключить jQuery:

Для простоты я снова использую ng-repeat . Мы запустим $scope.find метод тогда, когда границы таблицы сравняются с границами окна пользователя. Первый вызов $scope.find сделаем вручную с помощью атрибута infinite-scroll-immediate-check .

Я выкинул ручную генерацию html таблицы, оставил только вычисление числа (которое по прежнему в вебворкере).

Обновляем код в теге step-13.

Теперь страница показывает только первые 100 чисел. Если вы начнете прокручивать вниз, то новые будут вычислены новые числа и добавлены к таблице. Генерация довольно быстрая, чтобы не тормозить прокрутку. На временном графике мы можем увидеть 3 столбика для генерации первых 400 чисел (первые 100 сгенерированны до профилирования):

Топ-пост этого месяца:  301 редирект вместо директивы HOST в Яндекс.Вебмастер

Минимизация наблюдаемых объектов

Еще одна не очевидная причина тормозов в AngularJS – тяжелые вотчеры, а именно вотчеры, которые наблюдают за сложным объектом, а еще хуже за результатом функции, которая возвращает такой объект. Вот эти 2 вотчера:

AngularJS делает грязную проверку – в ходе каждого цикла дайджеста каждая наблюдаемая функция вычисляется и возвращает значение, которое сравнивается с предыдущим возвращенным значением. Это означает, что последнее значение было сохранено. Если вы используете вотчер с глубоким сравнением, тогда ангуляр сохраняет полную копию возвращаемого объекта. Это может быть довольно дорого с точки зрения производительности. Например массив с объектами:

Взять код можно из тега step-14.

Изначально загрузка приложения задерживатся на 500мс из-за объекта возвращаемого из primesWatcher и копируемого для дальнейшего сравнения. Приложение понесет тоже наказание каждый раз, когда объект primes будет изменен.

Важная заметка: полная копия занимает НАМНОГО больше времени, чем полное сравнение . Отсюда и задержка, которая появляется не в момент прохода дайджеста, а только когда что-то изменено. На практике это означает медленную реакцию на ввод пользовательских данных, когда результат вотчера копируется.

Несколько предложений как победить дорогостоящее полное копирование в вотчерах:

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

Объект primes изменяется каждый раз, когда мы добавляем новое число:

Тут я использую счетчик, чтобы гарантировано запускать вотчер, когда значение изменяется. Если бы я просто возвращал true/false, цикл дайджеста бы не заметил разницы, так как только разница возвращаемых значений играет роль, а не сами значения возвращаемые функцией.

Выводы и дальнейшее исследование

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

  1. Профилируйте, чтобы найти проблемные места
  2. Удаляется проблемные места
  3. Повторяйте шаги 1-2

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

Как правило код любого JavaScript приложения имеет проблемные места. Как только клиентский код оптимизирован, я переключаюсь на профилирование и оптимизацию Ангуляра, по большей части это удаление лишней работы, которую делает фреймворк. После чего, я переключаю внимание на выполнение кода/браузерную отрисовку, в надежде разбить большие куски на сравнительно небольшие части.

Граматное решение по улучшению производительности требует знаний JavaScript, оптимизаторов среды выполнения, процесса браузерного рендеринга и специфики фреймворка вашего приложения. В первую очередь оно требует сравнение производительности приложения с ожиданиями пользователя интерфейса при различных сценариях. AngularJS имеет некоторые проблематичные места, такие как грязная проверка в ходе цикла дайджеста. Однако, это очень гибкий фреймворк, как вы могли убедиться на примерах. Я смог изменить части системы, заменить шаги, но это по прежнему Ангулар приложение. То есть мы можем улучшить производительность каких-то конкретных частей без жертвы гибкости и простоты для всего приложения.

UPD: как альтернативу ng-repeat c ngInfiniteScroll можно использовать директиву angular-vs-repeat (обрабатывать только “видимые” строчки), которая так же дает хороший прирост к производительности.

Заметки по ускорению Angular-приложений

Другие статьи по AngularJS:

AngularJS — один из популярных JS-фреймворков. В его основе — шаблонизация и 2-way data binding. В Angular-приложениях поддерживается модульность, из коробки работает клиентский роутинг.

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

Существует множество способов оптимизации приложений Angular. Здесь я попробую перечислить самые популярные их этих способов и сравнить их.

Почему возникают задержки в работе?

В Angular есть 2 серьёзных причины замедления работы приложений.

  1. Отрисовка большого количества элементов DOM. Это особенно заметно при использовании директивы ng-repeat.
  2. Увеличение количества $watchers

Первая причина проявляется в задержках при отрисовке страницы, вторая — в замедленном отклике при нажатиях мыши и вводе текста.

Проблемы первого рода возникают, например, если в шаблоне присутствуют ng-repeat, отрисовывающие множество элементов. Проблемы второго рода чаще возникают, если используется сложный data binding.

Немного информации о $watchers

Каждый раз, когда в шаблоне встречается единичный data binding (интерполяция, директивы ng-bind, ng-if, ng-show, ng-hide, ng-class и др.), Angular добавляет для него $watcher, который следит за значением привязанного выражения. И каждый раз, когда происходит некое действие — например, пользователь нажимает по кнопке с директивой ng-click, Angular проходит по всем созданным ранее $watchers, вычисляет новые значения выражений и сравнивает с прежними (именно так и работает волшебный 2-way binding). Затем он принимает решение о необходимости перерисовки элементов вёрстки. Это называется digest loop.

Причём, если data binding используется внутри директивы ng-repeat, то для каждой итерации создаётся отдельный набор $watchers. Пример:

Для такого шаблона будет создано 3 $watchers (ng-show, ng-class, <>)

Если массив vm.data содержит 100 элементов, то Angular создаст 301 $watcher (по 3 на каждую итерацию и один для ng-repeat).

Если $watchers становится слишком много, то интерфейс становится менее отзывчивым, т.к. в ответ на каждый щелчок мышью и каждое нажатие клавиши Angular приходится заново проверять значения всех $watchers.

Пример кода для отслеживания общего количества $watchers на странице, либо в отдельном компоненте

Также существует удобная утилита для анализа количества $watchers и времени отклика страницы: ng-stats.

Ускорение отрисовки DOM

Метод вычисления эффективности

Для проверки разных способов оптимизации я написал тестовый Angular-компонент такого вида:

Среднее время отрисовки такого шаблона на тестовых данных составило 5800 мс.

Оптимизация ng-repeat

Значительная часть времени отрисовки страницы в Angular — это построение DOM. Таким образом, внутри директивы ng-repeat, к примеру, нужно минимизировать количество элементов DOM.

Использование ng-bind

Один из действенных способов ускорения отрисовки шаблонов — замена интерполяции ( <> ) на использование директивы ng-bind.

После применения такой замены по всему шаблону среднее время отрисовки — уже 5000 мс (-13%).

Этот метод работает только для простой интерполяции. Если в шаблоне заменить, например, такую конструкцию

отрисовка, наоборот замедлится, т.к. увеличилось количество элементов DOM.

Замена ng-show на ng-if

Во многих случаев ng-show/ng-hide в шаблонах можно заменить на ng-if. В результате Angular будет генерировать меньше элементов разметки. В нашем примере после замены ng-show на ng-if среднее время отрисовки уменьшилось до 4520 мс (-22%), а после объединения этого метода с предыдущим — до 4200 мс (-27%).

Этот метод также ускоряет отклик интерфейса, т.к. вместе с количеством элементов разметки уменьшается и количество $watchers.

Ускорение отклика интерфейса

One-time binding

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

One-time binding появился в Angular версии 1.3. Для более ранних версий существуют дополнения вроде ng-bind-once.

Попробуем использовать one-time binding в тестовом шаблоне.

Как видно, one-time binding использован во всех выражениях, кроме ng-repeat, т.к. мы предполагаем, что переменная vm.currentIndex будет изменяться, а содержимое элементов vm.data — нет. При каждом изменении vm.currentIndex всё содержимое блока ng-repeat будет перерисовано заново, поэтому two-way binding внутри него совершенно не нужен.

Среднее время отрисовки шаблона практически не изменилось.

Таким образом, этот метод оптимизации не спасает от проблем с отрисовкой DOM, но зато он поможет в том случае, если проблемы с замедлением работы приложения вызваны большим количеством $watchers.

Event delegation

Ещё одна из причин замедления Angular-приложений — множество обработчиков событий. Например:

Для каждого элемента из массива vm.items создаётся div, и для каждого из них происходит подписывание на событие click. В некоторых случаях это замедляет работу браузера.

Суть метода event delegation состоит в том, что подписывание на событие click можно производить только 1 раз — для родительского элемента. (в нашем случае — .container). В Angular для этого можно написать директиву наподобие такой:

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

И доработать шаблон:

Минус этого метода в том, что он может замедлить отрисовку DOM. При использовании делегирования событий на предыдущем тестовом примере, время отрисовки шаблона увеличилось до 6400 мс (+10%), т.к. в шаблоне внутри ng-repeat добавились атрибуты с data-binding.

Итоги

В этой статье были перечислено несколько из распространённых методов оптимизации Angular-приложений. Как видно, все они в разных ситуациях работают по-разному, и в некоторых случаях некоторые из этих методов не столько ускоряют, сколько замедляют работу приложения — поэтому надо применять их разборчиво.

И если необходимо подобрать JS-фреймворк для будущего проекта, в котором ожидается нагруженный UI, надо допускать вероятность, что выбор Angular окажется не лучшим решением.

Как я могу улучшить производительность загрузки приложений Angular2?

Angular2 приложение медленно загружается, как я могу повысить производительность при загрузке?

Я использую Angular2, typescript с html5.

В настоящее время мое приложение занимает 4 секунды для загрузки. Я принимаю Firebase и использую cloudflare.

Вещи, которые я делаю/информация:

  • Я сжал изображения.
  • Я сокращаю css
  • Я уменьшаю js.
  • Я использую async для своих скриптов.
  • Мои сценарии находятся в моем.
  • Скрипты около 700kb
  • Я использовал тест скорости Google и получил 65%
  • Я использовал сокращенную версию libs, которую я использую, например. бутстрап и т.д.
  • Использование systemjs.
  • Это приложение для семян im, использующее: https://github.com/mgechev/angular-seed

Поток:

Когда приложение загружается, отображается синий экран (это загрузочный css), а затем через 4 секунды приложение загружается и работает очень быстро. Но требуется 4 секунды для загрузки. Кажется, что файл app.js, который минимизирует systemjs, замедляет работу всего приложения, а также не показывает представления достаточно быстро.

Это мой сайт:

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

5 ответов

Как насчет «расщепления кода».

С сайта Webpack:

«Для больших веб-приложений неэффективно помещать весь код в один файл, особенно если некоторые блоки кода нужны только при определенных обстоятельствах. В Webpack есть функция разделить вашу кодовую базу на» куски «, которые загружаются по требованию Некоторые другие связки называют их» слоями «,» накопителями «или» фрагментами «. Эта функция называется» разделение кода».

Обратите внимание, что CLI Angular использует Webpack.

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

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

У меня также была такая же проблема, и моя команда оптимизировала наш проект от загрузки через 8 секунд до 2 секунд, используя следующие методы.

Ленивая загрузка модуля:. Ленивые модули загрузки помогают уменьшить время запуска. При ленивой загрузке нашему приложению не нужно загружать все сразу, ему нужно только загрузить то, что пользователь ожидает увидеть, когда приложение загружается первым. Модули, которые лениво загружаются, загружаются только тогда, когда пользователь переходит к своим маршрутам. Angular2 представил модули в своем окончательном релизе RC5. См. ниже шаг за шагом.

Компиляция Aot: В AoT браузер загружает предварительно скомпилированную версию приложения. Браузер загружает исполняемый код, чтобы он мог визуализировать приложение немедленно, не ожидая, чтобы сначала скомпилировать приложение.

Он уменьшает размер полезной нагрузки: нет необходимости загружать компилятор Angular, если приложение уже скомпилировано. Компилятор составляет примерно половину самого Angular, поэтому его отсутствие значительно снижает полезную нагрузку приложения. Для получения дополнительной информации см. this.

Webpack: Webpack — популярный модуль-пакет, инструмент для связывания исходного кода приложения в удобных кусках и для загрузки этого кода с сервера в браузер. Вы можете настроить веб-приложение Angular 2 с помощью webpack (см. это руководство).

Удалить скрипты, таблицу стилей из index.html: Удалить все сценарии и таблицы стилей, которые не нужны в index.html. Вы можете динамически загрузить эти script в самом компоненте, вызвав службу.

Сделайте файл script.service.ts, который может загрузить любой script по запросу для этого компонента

Это всего лишь образец кода для динамического загрузки script, вы можете настроить его и оптимизировать самостоятельно в соответствии с вашими потребностями. Для таблицы стилей вы должны загрузить ее в компоненте с помощью styleUrl.

Использовать кеширование браузера: Файлы вашей веб-страницы будут храниться в кеше браузера при использовании кеширования браузера. Ваши страницы будут загружаться намного быстрее для повторных посетителей, а также другие страницы, которые будут использовать те же ресурсы. Для получения дополнительной информации https://varvy.com/pagespeed/leverage-browser-caching.html

минимизировать код в app.component.ts: свести к минимуму код, присутствующий в app.component.ts, который всегда запускается, когда приложение загружается или перезагружается.

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

Постепенная загрузка модулей шаг за шагом

Модульная структура:. Мы должны разделить наше приложение на отдельные модули. Например, приложение может иметь пользовательскую сторону и административную сторону, и каждый из них будет иметь свои собственные компоненты и маршруты, поэтому мы разделим эти две стороны на модули admin.module.ts и user.module.ts.

Корневой модуль: Каждое приложение Angular имеет класс корневого модуля. По соглашению это класс под названием AppModule в файле с именем app.module.ts, этот модуль будет импортировать два вышеуказанных модуля, а также AppComponent для начальной загрузки. Вы также можете объявить несколько компонентов в соответствии с вашими потребностями. Пример кода в app.module.ts:

  1. Маршруты: Теперь на ваших маршрутах вы можете указать следующие

Теперь, когда приложение загружается, оно будет загружать только код LoginComponent и AppComponent. Эти модули будут загружаться только при посещении /admin или/пользовательских маршрутов. Следовательно, это уменьшит размер полезной нагрузки для загрузки в браузер, что приведет к быстрой загрузке.

  1. Вложенные модули:Так же, как app.module, каждый модуль имеет свой собственный набор компонентов и маршрутов. По мере того как ваш проект становится больше, вложенность модулей внутри модуля — лучший способ оптимизации, потому что мы можем лениво загружать эти модули всякий раз, когда нам нужно.

ОБРАТИТЕ ВНИМАНИЕ

Выше код предназначен только для объяснения, пожалуйста, обратитесь к полному примеру https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

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

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

Вот основные вещи, которые вы можете сделать, чтобы оптимизировать проект ng2 для производства:

1) Вперед времени (AoT) Компиляция — Объединение/Минирование/Встряхивание деревьев

Послушайте, забудьте о головной боли, чтобы настроить кучу задач глотки, чтобы выполнить все эти вещи. Ручки углового-cli Bundling/Minification/Tree-shaking/AOT-компиляция за один простой шаг:

Это создаст следующие js файлы в вашей папке «dist»:

Угловая компиляция AOT автоматически сделает «дрожание дерева» на вашем коде и избавится от любых неиспользуемых ссылок. Например, вы можете использовать lodash в своем проекте, но вы, вероятно, используете только несколько функций lodash; встряхивание деревьев урезает все неиспользуемые части lodash, которые не нужны в вашей окончательной сборке. И самое главное, компиляция AOT предварительно скомпилирует весь ваш код и представления, что означает МЕНЬШЕЕ время, когда браузеру нужно будет запустить приложение ng2. Нажмите здесь для получения дополнительной информации об угловой компиляции AOT.

2) ленивые загрузочные части вашего приложения. Если вы продолжите свое приложение в разных частях, вам не нужно загружать ВСЕ, когда ваше приложение загружается первым. Вы можете указать разные модули для своего приложения, которые затем могут быть объединены (компилятором angular-cli aot) в разные куски. Прочтите здесь, чтобы узнать, как организовать проект в модули, которые вы можете скомпилировать в патроны, которые загружаются только как НЕОБХОДИМЫЕ. Angular-cli будет управлять созданием этих кусков для вас.

3) Угловой универсальный Теперь, если вы действительно хотите сделать свое время загрузки ЧРЕЗВЫЧАЙНЫм быстрым, тогда вы захотите рассмотреть возможность внедрения Angular Universal, которая заключается в том, когда вы скомпилируете свой первоначальный вид на сервере. Я не использовал Angular Universal, так как мне удалось достичь быстрого времени загрузки с шагом 1 и 2. Но это захватывающий вариант в наборе инструментов ng2. Имейте в виду, что вы не компилируете или не запускаете приложение ng2 на сервере, вы компилируете начальное представление серверов, так что пользователь быстро получает толчок html, и, таким образом, пользователь ПЕРЕДАЕТ время загрузки очень быстро (даже при полной загрузке будет по-прежнему немного отставать). Этот шаг не устраняет необходимость в других шагах. В качестве бонуса, Angular Universal также должен помочь в SEO.

Изучаем AngularJS на пяти практических примерах

Скачать рабочие материалы к данной статье

Вы, наверное, слышали уже о AngularJS – JS-фреймворке с открытым исходным кодом, разработанном специалистами Google, который реально меняет представление о веб-приложениях. О нем уже много было написано, но до сих пор в Сети очень трудно найти что-то действительно ориентированное на разработчиков.

Где бы лаконично и конкретно, на практических примерах были описаны принципы работы AngularJS. Цель этой статьи – изменить подобное положение вещей. Ниже приводится описание основных составляющих элементов Angular: Модели,Представления, Контроллеры, Сервисы и Фильтры, созданное на основе пяти конкретных примеров.

Если вы предпочитаете редактировать код через ваш любимый редактор, скачайте ZIP-архив по ссылке выше.

Что такое AngularJS?

По большому счету AngularJS является основой, которая связывает HTML-код (который генерируется для просмотра страницы в окне браузера) с JavaScript объектов /моделей. Когда изменяется один из объектов, автоматически обновляется и генерируемая страница. Верно и обратное — модели связаны с текстовым полем (контентом страницы). Когда изменяется контент, это вызывает изменения и в коде сайта.

AngularJS связывает коды в единую систему, и вам не нужно больше обновлять HTML вручную или инспектировать элементы, как в случае, если вы используете JQuery. В самом деле, ни в одном из примеров, приведенных здесь, даже не упоминается JQuery!

Для использования AngularJS вы должны добавить его в код своей страницы. Для этого в тэг нужно прописать соответствующие параметры. Google’s CDN для более быстрой загрузки рекомендую еще такой код:

AngularJS включает в себя большое количество директив , которые позволяют связать HTML-элементы моделей. Они представляют из себя атрибуты, начинающиеся с префикса ng-, их можно добавлять к любому элементу. Самым важным атрибутом, который, если вы хотите использовать Angular, нужно включить во все страницы сайта является ng- приложений:

Атрибут следует добавлять к элементу, который охватывает нужную нам часть страницы: либо все тело страницы, либо ее часть ограниченную тэгами div. Angular ищет его при загрузке страницы и автоматически оценивает все директивы , которые видит, как дочерние элементы.

Но довольно теории. Давайте рассмотрим непосредственно некоторые коды.

Меню навигации

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

В приведенном выше примере, используются директивы Angular для задания и считывания активной переменной. Когда она изменяется, это инициирует изменения HTML-кода элемента. В терминологии Angular эта переменная называется моделью. Она доступна для всех директив текущей области. Ее также могут обрабатывать контроллеры (подробнее об этом в следующем примере).

Если вы использовали шаблоны JavaScript раньше, то вы знакомы с синтаксисом команды <>. Когда фреймворк видит такую строку, он заменяет содержимое переменной. Эта операция повторяется каждый раз, когда изменяется переменная.

Встроенный редактор

Для второго примера, мы создадим простой встроенный редактор – при нажатии пункта меню всплывает небольшое текстовое поле с подсказкой. Мы используем контроллер, который будет инициализировать модели и задавать два разных метода отображения подсказки. Контроллеры являются стандартными функциями JavaScript, которые автоматически выполняются фреймворком Angular. Они связаны с кодом отображения страницы вашего сайта через директивы ng-controller .

Когда функция контроллера запускается на исполнение, для нее в качестве параметра задается специальный объект $scope. Он отвечает за ввод текста в текстовый редактор. Для того, чтобы вывести его на экран, нужно прописать дополнительные свойства и функции, которые описывают отображение его элементов. С помощью NG-моделей осуществляется связь кода сайта с текстом, который вводится в рабочее поле редактора. При вводе текста Angular задает соответствующие изменения переменных.


Форма заказа

В этом примере мы рассмотрим код формы заказы, в которой автоматически выводится общая сумма. Здесь использована еще одна полезная функция AngularJS — фильтры . Фильтры позволяют вносить изменения в модели, а также объединять их с помощью символа «|». В приведенном ниже примере, используется фильтр валюты , чтобы перевести числовое значение в корректный формат цены — с разделением долларов и центов. Когда вы рассмотрите пример № 4, вы сможете с легкостью задавать свои собственные фильтры.

Связка ng-repeat ( описание ) – это еще один полезный элемент Angular. Она позволяет запустить цикл обработки массива элементов, а также задать разметку для каждого из них. Она автоматически обновляет код, если один из элементов был изменен или удален.

Функция поиска

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

Фреймворк является идеальным инструментом для создания пользовательских фильтров. Для этого сперва мы должны сформировать специальный модуль для нашего приложения.

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

Для того, чтобы создать модуль приложения, нужно выполнить всего два действия:

  1. Использовать функцию angular.module(«name»,[]) при вызове JS. Это установит границы нового модуля;
  2. Задать имя модуля в качестве значения директивы ng-app.

После этого фильтр создается очень просто функцией filter(). Также просто потом вызвать его через обращение к соответствующему модулю angular.module(«name», []).

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

Функция переключения режима вывода элементов на странице

Еще одна популярная функция – переключение по выбору пользователя различных режимов вывода элементов на странице (список или плитка). Через Angular это делается очень просто.

Кроме того, в этом примере описывается еще один важный элемент фреймворка – сервисы. Это объекты, которые могут быть использованы приложениями для взаимодействия с сервером, API или другими источниками данных. В нашем случае, мы напишем сервис, который взаимодействует с Instagram’s API и выводит массив с самыми популярными на текущий момент фотографиями.

Обратите внимание, что для работы этого кода, нам потребуется использовать на странице дополнительный файл Angular.js:

Для оптимизации работы с AJAX API здесь используется модуль ngResource (в коде модуля задействована переменная $resource).

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

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

Дополнительная литература

Если вы все же добрались до конца этой статьи, то у вас уже должно сложиться общее представление о базовых принципах работы с фреймворком AngularJS. Тем не менее, если вы хотите стать настоящим профи в данном вопросе, есть много источников, по которым вы можете изучить эту тему глубже. Вот список ресурсов, которые помогут вам этом:

Сайт AngularJS
Руководство по AngularJS
Официальное пособие по AngularJS
Список сайтов, где представлено еще много информации по теме, видео и учебники

Данная публикация представляет собой перевод статьи « Learn AngularJS With These 5 Practical Examples » , подготовленной дружной командой проекта Интернет-технологии.ру

Как я могу улучшить производительность загрузки приложений Angular2?

Приложение Angular2 загружается медленно, как я могу улучшить производительность при загрузке?

Я использую Angular2, машинопись с HTML5.

в настоящее время мое приложение загружается за 4 секунды. Я хост с Firebase и использую cloudflare.

Вещи, которые я делаю / информация:

  • Я сжал изображения.
  • Я минимизирую css
  • Я минимизирую JS.
  • Я использую async в моих сценариях.
  • Мои сценарии в моем.
  • Сценарии около 700 КБ
  • Я использовал Google Speed Test и получил 65%
  • Я использовал уменьшенную версию библиотек, которые я использую, например, начальной загрузки и т. Д.
  • Использование systemjs.
  • Это начальное приложение, которое я использую: https://github.com/mgechev/angular-seed

Поток:

Когда приложение загружается, оно показывает синий экран (это загрузочный css), а затем через 4 секунды приложение загружается и работает очень быстро. Но занимает 4 секунды, чтобы загрузить. Похоже, что файл app.js, который преобразует systemjs, замедляет все приложение и не отображает представления достаточно быстро.

Топ-пост этого месяца:  Вывод постов с помощью WP_Query запись на текущий пост должна выводиться без ссылки

Это мой сайт:

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

5 ответов

Как насчет «разделения кода».

С сайта Webpack:

«Для больших веб-приложений неэффективно помещать весь код в один файл, особенно если некоторые блоки кода требуются только при определенных обстоятельствах. В Webpack есть функция разбивать вашу кодовую базу на« куски », которые загружаются по требованию. Некоторые другие упаковщики называют их «слоями», «свертками» или «фрагментами». Эта функция называется «разбиением кода».

Обратите внимание, что Angular CLI использует Webpack.

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

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

Я также столкнулся с той же проблемой, и моя команда оптимизировала наш проект от загрузки за 8 секунд до 2 секунд, используя следующие методы.

Ленивая загрузка модуля: Ленивая загрузка модулей помогает сократить время запуска. При ленивой загрузке нашему приложению не нужно загружать все сразу, ему нужно только загрузить то, что пользователь ожидает увидеть при первой загрузке приложения. Модули, которые загружаются лениво, будут загружаться только тогда, когда пользователь переходит к своим маршрутам. Angular2 представила модули в своем окончательном выпуске RC5. Смотрите ниже пошаговое руководство.

Компиляция Aot: С помощью AoT браузер загружает предварительно скомпилированную версию приложения. Браузер загружает исполняемый код, поэтому он может визуализировать приложение немедленно, не дожидаясь его первой компиляции.

Это уменьшает размер полезной нагрузки: нет необходимости загружать компилятор Angular, если приложение уже скомпилировано. Компилятор составляет примерно половину самого Angular, поэтому его пропуск значительно снижает полезную нагрузку приложения. Для получения дополнительной информации см. Это .

Webpack: Webpack — это популярный пакетный модуль, инструмент для объединения исходного кода приложения в удобные порции и для загрузки этого кода с сервера в браузер. Вы можете настроить веб-приложение Angular 2 с помощью веб-пакета (см. Это руководство ).

Удалить сценарии, таблицу стилей из index.html: Удалить все сценарии и таблицу стилей, которые не нужны в index.html. Вы можете загружать эти скрипты динамически в сам компонент, вызывая сервис.

Создайте файл script.service.ts, который может загружать любой скрипт по запросу для этого компонента.

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

Использовать кеширование браузера: файлы веб-страниц будут сохраняться в кеше браузера, когда вы используете кеширование браузера. Ваши страницы будут загружаться намного быстрее для постоянных посетителей, как и другие страницы, которые используют те же ресурсы. Для получения дополнительной информации https://varvy.com/pagespeed/leverage-browser-caching.html

сверните код в app.component.ts: сверните код, присутствующий в app.component.ts, который всегда запускается при загрузке или перезагрузке приложения.

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

Ленивая загрузка модулей шаг за шагом

Модульная структура: мы должны разделить наше приложение на отдельные модули. Например, приложение может иметь сторону пользователя и сторону администратора, и у каждого будут свои собственные компоненты и маршруты, поэтому мы разделим эти две стороны на модули admin.module.ts и user.module.ts.

Корневой модуль. Каждое приложение Angular имеет класс корневого модуля. По соглашению это класс с именем AppModule в файле с именем app.module.ts, этот модуль импортирует два вышеуказанных модуля, а также AppComponent для начальной загрузки. Вы также можете объявить несколько компонентов в соответствии с вашими потребностями. Пример кода в app.module.ts:

  1. Маршруты: теперь в ваших маршрутах вы можете указать, как показано ниже:

Теперь, когда приложение загружается, оно загружает только код LoginComponent и AppComponent. Эти модули будут загружены только при посещении маршрутов / admin или / user. Следовательно, это уменьшит размер полезной нагрузки для загрузки в браузер, что приведет к быстрой загрузке.

  1. Вложенные модули: так же, как app.module, каждый модуль имеет свой собственный набор компонентов и маршрутов. По мере того как ваш проект становится больше, размещение модулей внутри модуля — лучший способ оптимизации, потому что мы можем лениво загружать эти модули всякий раз, когда нам это нужно.

ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ

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

Сказав это, я НАСТОЯТЕЛЬНО рекомендую вам начать использовать angular-cli . Он был разработан командой разработчиков angular для выполнения всего, что вам нужно сделать, в простом в использовании интерфейсе командной строки. Так что мой ответ основан на использовании angular-cli.

Вот основные вещи, которые вы можете сделать, чтобы оптимизировать проект ng2 для производства:

1) Компиляция накануне времени (AoT) — объединение / минификация / тряска деревьев

Послушай, забудь о головной боли, связанной с настройкой множества сложных задач для выполнения всех этих задач. Angular-Cli управляет компоновкой / минимизацией / тряской деревьев / компиляцией AOT за один простой шаг:

Это создаст следующие js-файлы в вашей папке «dist»:

AOT-компиляция Angular автоматически «сотрясает дерево» в вашем коде и избавляет от любых неиспользуемых ссылок. Например, вы можете использовать lodash в своем проекте, но вы, вероятно, используете только несколько функций lodash; встряхивание дерева отрежет все неиспользованные части lodash, которые не нужны в вашей финальной сборке. И самое главное, компиляция AOT предварительно скомпилирует весь ваш код и представления, что означает МЕНЬШЕ времени, которое требуется браузеру для запуска приложения ng2. Нажмите здесь для получения дополнительной информации о сборке AOT Angular.

2) Ленивая загрузка частей вашего приложения Если вы продолжаете разделять свое приложение на разные части, вам не нужно загружать ВСЕ, когда ваше приложение загружается впервые. Вы можете указать разные модули для своего приложения, которые затем могут быть объединены (компилятором angular-cli aot) в разные блоки. Прочитайте здесь, чтобы узнать, как организовать ваш проект в модули, которые вы можете скомпилировать в чаки, которые загружаются только по мере необходимости. Angular-cli поможет вам создать эти куски.

3) Angular Universal Теперь, если вы действительно хотите, чтобы время загрузки было ЧРЕЗВЫЧАЙНО быстрым, вам следует рассмотреть возможность внедрения Angular Universal , то есть когда вы компилируете свой первоначальный взгляд на СЕРВЕР. Я не использовал Angular Universal, так как я смог добиться быстрого времени загрузки с помощью шагов 1 и 2. Но это замечательная опция в наборе инструментов ng2. Имейте в виду, что вы не компилируете и не запускаете приложение ng2 на сервере, вы компилируете начальное представление на стороне сервера, чтобы пользователь быстро получил толчок html и, таким образом, пользователь СЧИТАЕТ, что время загрузки очень быстрое (даже при полной загрузке) все равно будет немного отставать). Этот шаг не устраняет необходимость в других шагах. В качестве бонуса, Angular Universal также должен помочь с SEO.

4) Вторичная комплектация

Как повысить производительность загрузки приложений Angular2? — performance

Angular2 приложение медленно загружается, как я могу повысить производительность при загрузке?

Я использую Angular2, typescript с html5.

В настоящее время мое приложение занимает 4 секунды для загрузки. Я принимаю Firebase и использую cloudflare.

Вещи, которые я делаю/информация:

  • Я сжал изображения.
  • Я сокращаю css
  • Я уменьшаю js.
  • Я использую async для своих скриптов.
  • Мои сценарии находятся в моем.
  • Скрипты около 700kb
  • Я использовал тест скорости Google и получил 65%
  • Я использовал сокращенную версию libs, которую я использую, например. бутстрап и т.д.
  • Использование systemjs.
  • Это приложение для семян im, использующее: https://github.com/mgechev/angular-seed

Поток:

Когда приложение загружается, отображается синий экран (это загрузочный css), а затем через 4 секунды приложение загружается и работает очень быстро. Но требуется 4 секунды для загрузки. Кажется, что файл app.js, который минимизирует systemjs, замедляет работу всего приложения, а также не показывает представления достаточно быстро.

Это мой сайт:

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

    2 5
  • 3 окт 2020 2020-10-03 22:27:29
  • AngularM

5 ответов

Попробуйте отключить исходные карты, запустив ng serve —sourcemap=false

  • 3 окт 2020 2020-10-03 22:27:31
  • Cengkuru Michael

потому что его SPA и angular 2 init слишком медленны. это оно. плюс RXjs, тонны полифилов и т.д. AOT может помочь, но многие из angular2 libs не работают с ним. angular универсальная помощь помогает

  • 3 окт 2020 2020-10-03 22:27:31
  • dimson d

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

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

Вот основные вещи, которые вы можете сделать, чтобы оптимизировать проект ng2 для производства:

1) Вперед времени (AoT) Компиляция — Объединение/Минирование/Встряхивание деревьев

Послушайте, забудьте о головной боли, чтобы настроить кучу задач глотки, чтобы выполнить все эти вещи. Ручки углового-cli Bundling/Minification/Tree-shaking/AOT-компиляция за один простой шаг:

Это создаст следующие js файлы в вашей папке «dist»:

Угловая компиляция AOT автоматически сделает «дрожание дерева» на вашем коде и избавится от любых неиспользуемых ссылок. Например, вы можете использовать lodash в своем проекте, но вы, вероятно, используете только несколько функций lodash; встряхивание деревьев урезает все неиспользуемые части lodash, которые не нужны в вашей окончательной сборке. И самое главное, компиляция AOT предварительно скомпилирует весь ваш код и представления, что означает МЕНЬШЕЕ время, когда браузеру нужно будет запустить приложение ng2. Нажмите здесь для получения дополнительной информации об угловой компиляции AOT.

2) ленивые загрузочные части вашего приложения. Если вы продолжите свое приложение в разных частях, вам не нужно загружать ВСЕ, когда ваше приложение загружается первым. Вы можете указать разные модули для своего приложения, которые затем могут быть объединены (компилятором angular-cli aot) в разные куски. Прочтите здесь, чтобы узнать, как организовать проект в модули, которые вы можете скомпилировать в патроны, которые загружаются только как НЕОБХОДИМЫЕ. Angular-cli будет управлять созданием этих кусков для вас.

3) Угловой универсальный Теперь, если вы действительно хотите сделать свое время загрузки ЧРЕЗВЫЧАЙНЫм быстрым, тогда вы захотите рассмотреть возможность внедрения Angular Universal, которая заключается в том, когда вы скомпилируете свой первоначальный вид на сервере. Я не использовал Angular Universal, так как мне удалось достичь быстрого времени загрузки с шагом 1 и 2. Но это захватывающий вариант в наборе инструментов ng2. Имейте в виду, что вы не компилируете или не запускаете приложение ng2 на сервере, вы компилируете начальное представление серверов, так что пользователь быстро получает толчок html, и, таким образом, пользователь ПЕРЕДАЕТ время загрузки очень быстро (даже при полной загрузке будет по-прежнему немного отставать). Этот шаг не устраняет необходимость в других шагах. В качестве бонуса, Angular Universal также должен помочь в SEO.

4) Вторичное связывание

Если я не использую ленивую загрузку, я обычно буду продолжать собирать дистрибутивные файлы, созданные из компиляции AOT. Таким образом я создаю один main.bundle.js файл concats inline.js, vendor.js и main.js файлы. Для этого я использую глоток.

  • 3 окт 2020 2020-10-03 22:27:31
  • brando

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

У меня также была такая же проблема, и моя команда оптимизировала наш проект от загрузки через 8 секунд до 2 секунд, используя следующие методы.

Ленивая загрузка модуля:. Ленивые модули загрузки помогают уменьшить время запуска. При ленивой загрузке нашему приложению не нужно загружать все сразу, ему нужно только загрузить то, что пользователь ожидает увидеть, когда приложение загружается первым. Модули, которые лениво загружаются, загружаются только тогда, когда пользователь переходит к своим маршрутам. Angular2 представил модули в своем окончательном релизе RC5. См. ниже шаг за шагом.

Компиляция Aot: В AoT браузер загружает предварительно скомпилированную версию приложения. Браузер загружает исполняемый код, чтобы он мог визуализировать приложение немедленно, не ожидая, чтобы сначала скомпилировать приложение.

Он уменьшает размер полезной нагрузки: нет необходимости загружать компилятор Angular, если приложение уже скомпилировано. Компилятор составляет примерно половину самого Angular, поэтому его отсутствие значительно снижает полезную нагрузку приложения. Для получения дополнительной информации см. this.

Webpack: Webpack — популярный модуль-пакет, инструмент для связывания исходного кода приложения в удобных кусках и для загрузки этого кода с сервера в браузер. Вы можете настроить веб-приложение Angular 2 с помощью webpack (см. это руководство).

Удалить скрипты, таблицу стилей из index.html: Удалить все сценарии и таблицы стилей, которые не нужны в index.html. Вы можете динамически загрузить эти script в самом компоненте, вызвав службу.

Сделайте файл script.service.ts, который может загрузить любой script по запросу для этого компонента

Это всего лишь образец кода для динамического загрузки script, вы можете настроить его и оптимизировать самостоятельно в соответствии с вашими потребностями. Для таблицы стилей вы должны загрузить ее в компоненте с помощью styleUrl.

Использовать кеширование браузера: Файлы вашей веб-страницы будут храниться в кеше браузера при использовании кеширования браузера. Ваши страницы будут загружаться намного быстрее для повторных посетителей, а также другие страницы, которые будут использовать те же ресурсы. Для получения дополнительной информации https://varvy.com/pagespeed/leverage-browser-caching.html

минимизировать код в app.component.ts: свести к минимуму код, присутствующий в app.component.ts, который всегда запускается, когда приложение загружается или перезагружается.

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

Постепенная загрузка модулей шаг за шагом

Модульная структура:. Мы должны разделить наше приложение на отдельные модули. Например, приложение может иметь пользовательскую сторону и административную сторону, и каждый из них будет иметь свои собственные компоненты и маршруты, поэтому мы разделим эти две стороны на модули admin.module.ts и user.module.ts.

Корневой модуль: Каждое приложение Angular имеет класс корневого модуля. По соглашению это класс под названием AppModule в файле с именем app.module.ts, этот модуль будет импортировать два вышеуказанных модуля, а также AppComponent для начальной загрузки. Вы также можете объявить несколько компонентов в соответствии с вашими потребностями. Пример кода в app.module.ts:

  1. Маршруты: Теперь на ваших маршрутах вы можете указать следующие

Теперь, когда приложение загружается, оно будет загружать только код LoginComponent и AppComponent. Эти модули будут загружаться только при посещении /admin или/пользовательских маршрутов. Следовательно, это уменьшит размер полезной нагрузки для загрузки в браузер, что приведет к быстрой загрузке.

Angular.JS. Быстрое знакомство с популярным фреймворком от Google

Старичок JavaScript долгое время у меня ассоциировался со словом «гетто». Такую солянку подходов в разработке и хроническую неприязнь сообщества к применению проверенных временем методик проектирования мне никогда не доводилось видеть. Потребовались долгие годы, чтобы в это мрачное царство стали пробиваться лучи света под названием фреймворки.

Проблемы JavaScript

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

Но неужели проблема только в отсутствии профессионалов? Ведь рано или поздно зеленые юнцы, рубящие с плеча, должны набраться опыта и превратится в продвинутых учителей своего дела. Конечно же, нет. Причины лежат в самом языке и его архитектурных проблемах. Разработку JavaScript можно сравнить с гонками формула 1 – спорт-кары развивают реактивную скорость, но крайне ненадежны. Времени на создание языка было потрачено непростительно мало. Добавим сюда внезапную смену концепции проекта (изначально JavaScript планировался как функциональный язык) и в итоге получим то, что получили. Местами запутанный синтаксис, непредсказуемость работы некоторых операторов, бесконечные нюансы со слабой типизацией, проблемы с областью видимости переменных и кучу других дефектов, способных нарушить психику людей, привыкших работать с нормальными языками.

Первым, кто отважился по-настоящему развернуть неповоротливый JavaScript, стал Джон Резиг. Он разглядел в гадком утенке невидимое изящество и отважился решить одну из самых важных на то время проблем: покончить с бесконечным переписыванием одного и того же кода. В то время он занимался разработкой сайта компании Brand Logic и нюансы JavaScript прочувствовал на собственной шкуре.

Результатом его рвения стал первый релиз библиотеки jQuery. Она должна была решить не только проблему одноразового кода, но и добиться хоть какой-то кросс-браузерности. Не оставленным без внимания остался и синтаксис JavaScript. Библиотека позволила сократить многие монструозные конструкции и стала неким кусочком синтаксического сахара. Каждый новый релиз библиотека совершенствовалась и вбирала в себя новые возможности. Сегодня jQuery является неотъемлемыми инструментом любого web-разработчика и представить современный сайт без ее использования (или альтернатив) уже проблематично.

Ну а дальше началось самое интересное. jQuery показала, что JavaScript способен на многое и возможно именно это послужило своеобразным пинком для многих игроков web’а. К языку стали относится более снисходительно и пытаться всячески развивать. Чего только стоит пример Google, подаривший нам быстрейший JavaScript-движок V8. Благодаря ему появилась возможность создавать тяжелые js приложения. Вновь открывшиеся перспективы стали подспорьем для создания принципиально новых технологий на базе JavaScript. Достаточно назвать Node.JS и сразу становится ясным, что сегодня JavaScript намного больше, чем скриптовый язык. Сегодня он готов взять на себя все этапы создания приложения (клиентскую и серверную часть) не прибегая к вспомогательным инструментам.

JavaScript-фреймворки

На смену библиотекам вроде jQuery в мир JavaScript стали приходить фреймворки, реализующие популярный паттерн MVC (MVVM, MVP и т.д.). Фреймворки стали приносить новую культуру разработки и альтернативные взгляды на устоявшиеся в умах девелоперов вещи. Все больше стали подниматься вопросы применения паттернов, хорошо зарекомендовавших себя в мире большего программирования, и в умах js-разработчиков наконец-то стала укладываться аксиома: «Нельзя мешать логику с представлением».

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

Другим немаловажным плюсом всех фреймворков будет стандартизация кодирования. Если разработчик решается применять готовый каркас в своем проекте, то он должен быть готовым следовать его заповедям. Это значит, что ему нужно не полениться — один раз ознакомиться с правилами и быть спокойным, что в последствие код без проблем может дорабатываться другими разработчиками. Новому девелоперу будет проще разобраться в хорошо документированной структуре (особенно, если он уже имел опыт работы с этим решением), чем понять чей-то оригинальный велосипед.

Лежащий в основе большинства современных фреймворков паттерн проектирования MVC хорошо зарекомендовал себя и теперь стал доступен для JavaScript мира. Конечно, особой новизны и революции в этом событии нет. Любой продвинутый разработчик может без всяких фреймворков спроектировать приложение, следуя этому паттерну. Однако «может» и «обязывают» разные вещи. Учитывая, что в JS сообществе на передовые методики долго все клали железный болт, то требование применение паттерна со стороны фреймворка будет весьма кстати.

Angular JS

Проект Angular.JS относительно новый. Впервые был представлен в 2009 году. За это время вышло несколько версий и вокруг продукта сколотилось плотное сообщество. Успех к проекту во многом определил его родитель – компания Google. К релизам корпорации добра гики относится с особым трепетом, особенно если речь идет об инструментарии для разработчиков. В этот раз получилось тоже самое. Не буду вдаваться в технические дебри, а лучше сразу расскажу, чем зацепил проект лично меня.

Он предельно прост

Angular.JS имеет достаточно низкий порог вхождения по сравнению со многими подобными решениями. Документация носит слегка противоречивый характер. Она вроде хорошо структурирована, есть примеры кода, но некоторые вещи освещены крайне слабо. С ними придется разбираться самостоятельно путем изучения исходников или комментариев от коллег по цеху. Например, трудности понимания работы scope (областей видимости) развеют комментарии Misko Hevery на StackOverflow и просмотр видео «AngularJS. Best Practices» (http://goo.gl/UYG6Q).

Декларативный подход

Разработчики Angular.JS отошли от традиционной идеи: «HTML враг и нужно с ним бороться». Вместо этого они решили естественным образом расширить язык разметки, путем ввода дополнительных директив.

Тестирование

Чем больше тесты покрывают код, тем меньше вероятность возникновения нежданчиков. Разработчики Angular всеми фибрами поощряют подобные подходы, поэтому фреймворк из коробки дружелюбен к написанию тестов.

Выражения

Чтобы что-то вывести содержимое какого- либо объекта тебе не требуется писать в шаблоне громоздкие конструкции в стиле или что-то в этом роде. Достаточно заключить выражение в двойные фигурные скобки и все, данные будут обработаны. Например, результатом выполнения кода

Директивы Angular.JS

Директивы являются одной из ключевых возможностей Angular.JS. Они позволяют разработчику описать поведение отдельных элементов и расширить синтаксис HTML. В состав angular входит лишь базовый набор директив. Однако, никто не мешает нам его расширить своими собственными наработками. Правильно созданные директивы могут использоваться и в других проектах. Некоторые разработчики даже практикуют выкладывать свои коллекции компонент в публичный доступ. Ярким примером тому является команда AngularUI, которые выложили и поддерживают в актуальном состоянии порядка двадцати готовых к использованию компонент.

Я неспроста сказал, что директивы являются одной из ключевых возможностей. Начинающие разработчики частенько пропускают эту мысль мимо ушей и начинают мудрить по своему – изменяют напрямую DOM. Этого делать ни в коем случае нельзя. Почему? Во-первых, так гласят священные заповеди Angular.JS, а во-вторых разработчик лишается вкусностей вроде многоразового использования своих наработок, простого сопровождения кода и т.д.

Scope, производительность и мифы

О производительности Angular можно найти много негативных мнений. По некоторым заявлениям, производительность фреймворка недостаточно хороша и не годится для серьезных приложений. Например, нередко можно встретить примеры, авторы которых демонстрируют непригодность фреймворка для обработки нескольких десятков тысяч объектов. «Тормозит, ваш angular с его продвинутым биндингом!» — кричат ярые противники. При детальном рассмотрении примеров становится, очевидно, что проблема надуманна и их авторы не удосужились прочитать до конца документацию и вспомогательные материалы с официального блога.

Чтобы раз и навсегда развеять мифы о производительности разберемся с таинственной сущностью scope (область видимости). Scope – это не модель и ненужно пытаться ее из него делать. Ничего хорошего из этого не получится. В руководстве по angular четко сказано, что под моделью подразумевается любой массив данных, а scope может содержать ссылку на модель. Не нужно пихать все данные из модели в scope. Да, в таком контексте ими удобно манипулировать, но кроме тормозов никакой выгоды ты не получишь. Не стоит считать все вышесказанное банальным обходным маневром и отмазкой со стороны разработчиков angular. Это архитектура angular.js и с ней нужно считаться. Тем более, не стоит забывать о паттерне MVVM. Помимо традиционной сущности «модель» он выделяет «модель-представление» и в данном случае, scope это есть модель-представление, а значит, в ней должны быть данные, которые требуется отображать.

Получается, что наезды на производительность angular по большей части неуместны. Во всяком случае, на озвученных выше примерах. Хорошо, один миф разрушен. Но ведь, проблемы могут случиться (теоретически) и на более скромных объемах. Некоторые разработчики утверждают, что тормоза могут проявляться, когда в scope напихано ни много, ни мало, а 2000-3000 объектов. Как быть с этим аргументом? Частично ответ я уже дал – не нужно пихать в scope то, что не нужно отображать прямо сейчас. Вот серьезно, я не могу представить ни одной задачи, которая может потребовать вывод такого большего количества объектов на одной странице. Тут либо закралась ошибка в архитектуре приложения, либо разработчик неправильно трактует решаемую задачу.

Почему же несколько тысяч элементов могут вызывать серьезные проблемы с производительностью? Ну, ей, богу, в каком веке мы живем? Неужели пару тысяч объектов могут стать серьезной проблемой для современного ПК? На самом все несколько сложнее, чем просто большое количество объектов. Причина кроется в работе биндинга. Во время компоновки шаблона директивы создают так называемых наблюдателей ($watch). Наблюдатели уведомляют директивы об изменения свойств, чтобы те в свою очередь во время обновили значения элементов в DOM. Эта операция производится часто, поэтому при большом количестве объектов в scope тормоза будут неизбежны.

Топ-пост этого месяца:  Обзор движка для интернет-магазинов Shop-Script 7 отзывы

Загрузка angular-приложения

Начальная загрузка angular приложения выполняется при помощи директивы ngApp. Данный способ подходит в большинстве случаев, но при желании можно все сделать ручками. В нашем примере мы пойдем простым путем, т.е. воспользуемся директивой ngApp, указав ее в корневом элементе страницы. После объявления этой директивы произойдет следующее:

  • создается injector (механизм, применяемый для получения экземпляров объектов, предоставляемые поставщиком; загрузки модулей и т.д.), который будет использоваться для внедрения зависимостей в пределах приложения;
  • injector, сформирует глобальный scope в контексте модели нашего приложения;
  • angular начнет обрабатывать дерево DOM, начиная с элемента в котором была объявлена директива ngApp. Во время этого процесса будут созданы все найденные биндинги и выполнены обнаруженные директивы.

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

    ToDo лист. Держим задачи под зорким надзором

    Я долго думал, какой лучше подобрать пример для демонстрации angular. Скажу честно, сначала у меня была грандиозная идея сотворить матерое расширение для браузера Google Chrome, способное взаимодействовать с различными сервисами корпорации добра. Но, к сожалению, до конца отладить весь задуманный функционал у меня не вышло. Что-то постоянно не работало и глючило. В итоге я решил рассмотреть классический пример – создание ToDo листа, а про разработку расширений для Google Chrome, когда-нибудь сделаю, с позволения редактора рубрики, отдельную статью.

    Для начала сформулируем задачу. Что из себя представляет типичный ToDo лист? В первую очередь – это список задач, которые необходимо выполнить в определенное время. Каждая задача это отдельный элемент, обладающий минимум двумя свойствами: наименование (описание задачи) и состояние.

    Представление

    Часть кода представления я привел в первом листинге, а полную версию ты всегда можешь взять с нашего диска. Любое angular приложение начинается с объявление директивы ngApp. Обрати внимание, что в коде название директив пишется через тире, а в хелпе и в тексте стать слитно. Для директивы ngApp можно указать дополнительный атрибут – имя модуля, который будет загружен при инициализации приложения. Пока оставим этот вопрос открытым, а в качестве имени модуля укажем todomvc. Далее я привожу описание формы с одним единственным полем. В него пользователь будет вводить новую задачу и при нажатии кнопки «Отправить» она будет отправляться в общий список.

    Обработать событие отправки данных введенных в форму поможет директива ngSubmit. Она позволяет забиндить действие, которое будет выполняться при отправке данных из формы. В нашем случае таким действием будет метод контроллера addTodo(). В теле метода будет описан код, добавляющий новую задачу в модель. Сам текст задачи будет вводиться в поле ввода, для которого я указываю директиву ngModel, тем самым устанавливая двухстороннюю привязку с моделью отображения.

    Теперь взглянем на вывод данных из модели. Каждая новая задача обрамляется тегом li, включающий в себя элементы управления: изменение состояния, редактирование или удаление. Функционал этих кнопок реализуется тем же способом, что и был применен для добавления новых задач. С одним лишь отличием, вместо директивы ngSubmit используется ngClick (обрабатываем клик по кнопке) или ngDblClick (двойной щелчок).

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

    Для пущей красоты нам необходимо позаботиться об альтернативном оформлении выполненных задач. По задумке, ко всем завершенным таскам должны применяться стиль «зачеркнуто». Эффективно решить эту задачу поможет директива ngClass. Она устанавливает класс оформления для определенного html элемента в зависимости от результата вычисления выражения.

    Последнее, что нуждается в пояснении – конструкция filter:statusFilter . Здесь filter – встроенная функция, позволяющая отфильтровать данные из массива todos, соответствующие значению переменной statusFilter (ее значение будет изменяться в контроллере).

    Контроллер

    В втором листинге я привел описание контроллера — ключевой части нашего примера. Контроллер в angular оформляется в виде обычной JavaScript-функции. Например: function MyController () .

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

    Правда, при вынесении контроллера в отдельный файл мы должны как-то сообщить angular, что в контексте нашего приложения необходимо использовать именно этот контроллер. Решением этого вопроса занимается директива ngApp. В качестве дополнительного атрибута она принимает имя модуля, который будет загружен при инициализации приложения. Под модулем в Angular подразумевается совокупность служб, директив, фильтров и различной вспомогательной информации, которая может быть использована для конфигурирования injector. Для нашего примера в качестве модуля я указываю «todomvc», а его создание описываю в файле app.js:

    После этого, в рамках данного модуля можно описать наш контроллер, что я и делаю конструкций:

    Давай разберем ее на кусочки:

  • todomvc – имя модуля (вспоминаем про директиву ngApp и файл app.js);
  • controller – служба, отвечающая за создание экземпляра контроллера. В качестве параметров мы должны передать название функции с контроллером и ссылка на объект, соответствующий контроллеру. Обрати внимание, как я передаю ссылку на объект контроллера. Поскольку отдельной функции контроллера у нас нет, то я ее определяю прямо в параметре.
  • function TodoCtrl($scope, $location, todoStorage) – функция, определяющая контроллер.В качестве параметров передаем:
  • $scope. Область видимости, созданная при объявлении директивы ngController;
  • $location. Служба, предназначенная для работы с URL, введенным в адресной строке браузера;
  • todoStorage. Самописная служба, созданная для взаимодействия с локальным хранилищем.

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

    С объявлением контроллера разобрались. Теперь посмотрим на его внутренности. В самой первой строчке я объявляю модель (todos), которая представляет собой обычный массив. В нем будут храниться все добавленные пользователем задачи. Чтобы получить список задач, который отображен в представлении в настоящее время, достаточно обратиться к свойству todos в scope. Однако, нас должны интересовать не только текущие данные, но и ранее сохраненные в локальном хранилище, которые мы можем получить через описанную мной службу todoStorage. После этих манипуляций, в модели будут абсолютно все данные.

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

  • значение, за которым требуется наблюдать;
  • функция, которая вызывается при изменении значения переданного в качестве первого параметра;
  • признак необходимости сравнивать объект;

    В теле функции, которая будет вызывать при изменении содержимого модели, я определяю всего лишь один метод – todoStorage.put(todos) . Он отвечает за сохранение списка задач в локальное хранилище.

    Чуть ниже по тексту второго листинга ты можешь увидеть похожий трюк. Только на этот раз следить нужно за изменением адресной строки. Появление параметра «active» означает необходимость установки фильтра, отображающего пользователю только невыполненные задачи. Ну а если в url присутствует параметр «completed», то делаем обратную операцию – невыполненные задачи скрываем, а завершенные отображаем.

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

    Тестируем

    Написание тестов – неотъемлемая часть разработки приложения с использованием angular. Для написания и выполнения тестов есть все необходимое из коробки и сейчас ты в этом убедишься на реальном примере. Я не буду заходить далеко, а просто приведу часть кода, тестирующего контроллер с необходимыми для понимания комментариями. Все подробности ты узнаешь из документации.

    Вместо заключения

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

    Листинг 1. Представление

    Листинг 2. Контроллер в Angular.JS

    Листинг 3. Тестируем код контроллера

    Как изучать Angular.JS

    Братья по духу

    Как отладить Angular приложение

    При разработке на angular тебе однозначно понадобится дополнительный инструмент отладки. К счастью, такой инструмент уже создан и выполнен в виде расширения для Google Chrome. Называется оно Angular JS Batarag и после установки из Google Play расширение встраивается дополнительной примочкой в Developers Tools. Batarag позволит тебе просматривать иерархию scope, их содержимое и при желании изменять значения прямо из консоли. Более подробную информацию ты сможешь получить из видео, доступного на странице расширения в Google Play.

    Angular: оптимизация обработки событий

    Оптимизация обработки часто вызываемых событий при реализации drag-and-drop интерфейса при помощи Angular на примере задачи с перетаскиванием элементов.

    Прошла буквально пара недель, как я впервые начал писать на Angular, и сразу же столкнулся с рядом специфических проблем. Из-за малого опыта работы с этим фреймворком, я не уверен, что примененные способы оптимизации — это не стандартная практика. Некоторые признаки указывают, что разработчики предполагают подобные подходы, но делать выводы пришлось по профайлеру, а информацию искать по частям. При этом надо сказать, что решение нашлось очень быстро, когда причины проблем прояснились.

    В статье я разберу как оптимизировать обработку часто вызываемых событий: mousemove, scroll, dragover и прочих. Конкретно я столкнулся с проблемами при реализации drag-and-drop интерфейса, поэтому и разбирать буду на примере с перетаскиванием элементов.

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

    Решаемая задача

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

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

    Первый вариант решения

    Первым делом я направился искать готовые решения, реализующие drag-and-drop, выбор пал на ng2-dnd, так у данной библиотеки понятное и простое API, и присутствует некоторая популярность в виде звездочек на гитхабе.

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

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

    • вычисления потребляли все доступные мощности;
    • результат отображался с большой задержкой.

    Здесь можно посмотреть результат данного подхода.

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

    Доработки

    Доводить до ума подобную реализацию смысла никакого не было, так как работать в таком режиме практически невозможно.

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

    Данный подход предполагает взаимодействие с HTML элементами и нативными событиями, что не хорошо в контексте фреймворка, но я посчитал это приемлемым в целях оптимизации.

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

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

    Второе решение

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

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

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

    Тут я уже начал понимать, что ответственен за это Zone.js, который лежит в основе Angular. На это явно указывали методы, которые можно наблюдать в профайлере. В файле polyfills.ts, я увидел, что есть возможность отключить стандартный обработчик фреймворка для некоторых событий. И так как чаще всего при перетаскивании вызывается событие dragover, включение его в черный список, давало практические идеальный результат.

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

    Третий вариант решения

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

    Шаг 1

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

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

    Код после рефакторинга

    Шаг 2

    Из комментария в файле polyfills.js следует, что Zone.js по умолчанию берет на себя контроль за всеми событиями DOM и различными задачами например обработку setTimeout.

    Это позволяет Angular своевременно запускать механизм поиска изменений, а пользователям фреймворка не задумываться над контекстом выполнения кода.

    На Stack Overflow было найдено решение, как с помощью переопределения стандартного EventManager, можно заставить события с определенным параметром выполняться вне контекста фреймворка. Данный подход позволяет, точечно контролировать обработку событий в конкретных местах.

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

    Шаг 3

    Еще один момент заключается в том, что внесение изменений в DOM, провоцируют браузер немедленно отобразить их.

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

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

    Шаг 4

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

    Подробнее с механизмом обнаружения изменений можно ознакомиться в данной статье. Я лишь скажу, что явно управлять поиском изменений можно с помощью ChangeDetectorRef. Через DI он подключается к нужному компоненту, и как только становится известно об изменениях, которые вносились при выполнении кода вне контекста Angular, необходимо запустить поиск изменений в конкретном компоненте.

    Итоговый вариант

    Вносим в код компонента буквально пару изменений: события dragenter, dragleave, dragover заменяем на аналогичные с .out-zone в конце названия, и в обработчиках этих событий явно указываем фреймворку на наличие изменений в данных.

    Заключение

    В итоге получаем чистый и понятный код, с точным контролем за изменениями.

    Работа с VPC при помощи пакета ansible-selvpc-modules

    Как мы уже писали, сервис Virtual Private Cloud компании Selectel построен на базе платформы OpenStack, об этом подробнее можно прочитать в нашей предыдущей статье. Многие наши клиенты привыкли использовать в своих проектах систему управления конфигурациями Ansible, которая позволяет автоматизировать рутинные задачи и облегчить жизнь системного администратора. Также к преимуществам Ansible относится множество готовых модулей, в том.

    Искусство виртуального дирижирования OpenStack: работа с Heat

    В предыдущей cтатье мы описали базовые принципы работы с API и консольными утилитами, управляющими отдельными компонентами платформы Openstack (nova, cinder, glance, neutron). Сегодня мы рассмотрим, как с помощью модуля оркестрации Heat можно построить готовую инфраструктуру из виртуальных устройств. .

    Как я могу улучшить производительность загрузки приложений Angular2?

    Angular2 приложение медленно загружается, как я могу повысить производительность при загрузке?

    Я использую Angular2, typescript с html5.

    В настоящее время мое приложение занимает 4 секунды для загрузки. Я принимаю Firebase и использую cloudflare.

    Вещи, которые я делаю/информация:

    • Я сжал изображения.
    • Я сокращаю css
    • Я уменьшаю js.
    • Я использую async для своих скриптов.
    • Мои сценарии находятся в моем.
    • Скрипты около 700kb
    • Я использовал тест скорости Google и получил 65%
    • Я использовал сокращенную версию libs, которую я использую, например. бутстрап и т.д.
    • Использование systemjs.
    • Это приложение для семян im, использующее: https://github.com/mgechev/angular-seed

    Поток:

    Когда приложение загружается, отображается синий экран (это загрузочный css), а затем через 4 секунды приложение загружается и работает очень быстро. Но требуется 4 секунды для загрузки. Кажется, что файл app.js, который минимизирует systemjs, замедляет работу всего приложения, а также не показывает представления достаточно быстро.

    Это мой сайт:

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

    5 ответов

    Как насчет «расщепления кода».

    С сайта Webpack:

    «Для больших веб-приложений неэффективно помещать весь код в один файл, особенно если некоторые блоки кода нужны только при определенных обстоятельствах. В Webpack есть функция разделить вашу кодовую базу на» куски «, которые загружаются по требованию Некоторые другие связки называют их» слоями «,» накопителями «или» фрагментами «. Эта функция называется» разделение кода».

    Обратите внимание, что CLI Angular использует Webpack.

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

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

    У меня также была такая же проблема, и моя команда оптимизировала наш проект от загрузки через 8 секунд до 2 секунд, используя следующие методы.

    Ленивая загрузка модуля:. Ленивые модули загрузки помогают уменьшить время запуска. При ленивой загрузке нашему приложению не нужно загружать все сразу, ему нужно только загрузить то, что пользователь ожидает увидеть, когда приложение загружается первым. Модули, которые лениво загружаются, загружаются только тогда, когда пользователь переходит к своим маршрутам. Angular2 представил модули в своем окончательном релизе RC5. См. ниже шаг за шагом.

    Компиляция Aot: В AoT браузер загружает предварительно скомпилированную версию приложения. Браузер загружает исполняемый код, чтобы он мог визуализировать приложение немедленно, не ожидая, чтобы сначала скомпилировать приложение.

    Он уменьшает размер полезной нагрузки: нет необходимости загружать компилятор Angular, если приложение уже скомпилировано. Компилятор составляет примерно половину самого Angular, поэтому его отсутствие значительно снижает полезную нагрузку приложения. Для получения дополнительной информации см. this.

    Webpack: Webpack — популярный модуль-пакет, инструмент для связывания исходного кода приложения в удобных кусках и для загрузки этого кода с сервера в браузер. Вы можете настроить веб-приложение Angular 2 с помощью webpack (см. это руководство).

    Удалить скрипты, таблицу стилей из index.html: Удалить все сценарии и таблицы стилей, которые не нужны в index.html. Вы можете динамически загрузить эти script в самом компоненте, вызвав службу.

    Сделайте файл script.service.ts, который может загрузить любой script по запросу для этого компонента

    Это всего лишь образец кода для динамического загрузки script, вы можете настроить его и оптимизировать самостоятельно в соответствии с вашими потребностями. Для таблицы стилей вы должны загрузить ее в компоненте с помощью styleUrl.

    Использовать кеширование браузера: Файлы вашей веб-страницы будут храниться в кеше браузера при использовании кеширования браузера. Ваши страницы будут загружаться намного быстрее для повторных посетителей, а также другие страницы, которые будут использовать те же ресурсы. Для получения дополнительной информации https://varvy.com/pagespeed/leverage-browser-caching.html

    минимизировать код в app.component.ts: свести к минимуму код, присутствующий в app.component.ts, который всегда запускается, когда приложение загружается или перезагружается.

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

    Постепенная загрузка модулей шаг за шагом

    Модульная структура:. Мы должны разделить наше приложение на отдельные модули. Например, приложение может иметь пользовательскую сторону и административную сторону, и каждый из них будет иметь свои собственные компоненты и маршруты, поэтому мы разделим эти две стороны на модули admin.module.ts и user.module.ts.

    Корневой модуль: Каждое приложение Angular имеет класс корневого модуля. По соглашению это класс под названием AppModule в файле с именем app.module.ts, этот модуль будет импортировать два вышеуказанных модуля, а также AppComponent для начальной загрузки. Вы также можете объявить несколько компонентов в соответствии с вашими потребностями. Пример кода в app.module.ts:

    1. Маршруты: Теперь на ваших маршрутах вы можете указать следующие

    Теперь, когда приложение загружается, оно будет загружать только код LoginComponent и AppComponent. Эти модули будут загружаться только при посещении /admin или/пользовательских маршрутов. Следовательно, это уменьшит размер полезной нагрузки для загрузки в браузер, что приведет к быстрой загрузке.

    1. Вложенные модули:Так же, как app.module, каждый модуль имеет свой собственный набор компонентов и маршрутов. По мере того как ваш проект становится больше, вложенность модулей внутри модуля — лучший способ оптимизации, потому что мы можем лениво загружать эти модули всякий раз, когда нам нужно.

    ОБРАТИТЕ ВНИМАНИЕ

    Выше код предназначен только для объяснения, пожалуйста, обратитесь к полному примеру https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

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

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

    Вот основные вещи, которые вы можете сделать, чтобы оптимизировать проект ng2 для производства:

    1) Вперед времени (AoT) Компиляция — Объединение/Минирование/Встряхивание деревьев

    Послушайте, забудьте о головной боли, чтобы настроить кучу задач глотки, чтобы выполнить все эти вещи. Ручки углового-cli Bundling/Minification/Tree-shaking/AOT-компиляция за один простой шаг:

    Это создаст следующие js файлы в вашей папке «dist»:

    Угловая компиляция AOT автоматически сделает «дрожание дерева» на вашем коде и избавится от любых неиспользуемых ссылок. Например, вы можете использовать lodash в своем проекте, но вы, вероятно, используете только несколько функций lodash; встряхивание деревьев урезает все неиспользуемые части lodash, которые не нужны в вашей окончательной сборке. И самое главное, компиляция AOT предварительно скомпилирует весь ваш код и представления, что означает МЕНЬШЕЕ время, когда браузеру нужно будет запустить приложение ng2. Нажмите здесь для получения дополнительной информации об угловой компиляции AOT.

    2) ленивые загрузочные части вашего приложения. Если вы продолжите свое приложение в разных частях, вам не нужно загружать ВСЕ, когда ваше приложение загружается первым. Вы можете указать разные модули для своего приложения, которые затем могут быть объединены (компилятором angular-cli aot) в разные куски. Прочтите здесь, чтобы узнать, как организовать проект в модули, которые вы можете скомпилировать в патроны, которые загружаются только как НЕОБХОДИМЫЕ. Angular-cli будет управлять созданием этих кусков для вас.

    3) Угловой универсальный Теперь, если вы действительно хотите сделать свое время загрузки ЧРЕЗВЫЧАЙНЫм быстрым, тогда вы захотите рассмотреть возможность внедрения Angular Universal, которая заключается в том, когда вы скомпилируете свой первоначальный вид на сервере. Я не использовал Angular Universal, так как мне удалось достичь быстрого времени загрузки с шагом 1 и 2. Но это захватывающий вариант в наборе инструментов ng2. Имейте в виду, что вы не компилируете или не запускаете приложение ng2 на сервере, вы компилируете начальное представление серверов, так что пользователь быстро получает толчок html, и, таким образом, пользователь ПЕРЕДАЕТ время загрузки очень быстро (даже при полной загрузке будет по-прежнему немного отставать). Этот шаг не устраняет необходимость в других шагах. В качестве бонуса, Angular Universal также должен помочь в SEO.

  • Добавить комментарий