Уже есть много способов оптимизировать NG онлайн. Ядро - это внутренние атрибуты масштаба $$ Watchers. Сегодня я расскажу о чем -то другом, сущность остается неизменной, потому что это недостаток NG. Тем не менее, я считаю, что до тех пор, пока вы используете соответствующие методы, эти проблемы все еще можно избежать.
Введение
AngularJS сокращается как NG, которая представляет собой структуру MVVM, созданная Google. Это повышает эффективность развития фронт-элитных проектов (на практике это действительно может повысить эффективность развития). Он использует контроллеры, инструкции и услуги для вращения вокруг всего проекта, и использует уникальный DI для решения задач вызовов перед третьим слоем. Для получения более подробной информации, пожалуйста, обратитесь к анализу исходного кода NG, который я написал ранее.
Жесткая рана Нг
Когда дело доходит до недостатков, мы должны сначала поговорить о его простой принципе привязки данных
Модель, определенная на каждой странице в NG, фактически добавит слушателя в текущую область. Внутренний контейнер - это массив $$ Wachers. До тех пор, пока любая модель на странице меняется, метод $ Digest внутри прицела будет запускается. Он в свою очередь будет искать все модели в текущем дереве охвата, чтобы гарантировать, что модели на странице могут получить синхронизацию данных, так что это очень много времени. Официальное заявление состоит в том, что когда на странице появятся 2000 слушателей, производительность страницы значительно упадет. Поэтому, чтобы улучшить производительность NG, вы должны начать с этого аспекта.
TIP1: Одноразовое привязка
На самом деле, кто -то еще уже сказал это в Интернете. Вот новое использование. Версия NG 1.3.0+ уже предоставила встроенный синтаксис для поддержки ситуации, когда модель связана только один раз. См. Следующий пример:
старый код
Кода -копия выглядит следующим образом:
привет
новый код
Кода -копия выглядит следующим образом:
привет
Вы можете видеть, что новый синтаксис должен добавить :: перед моделью. Я считаю, что этот синтаксис гораздо удобнее, чем сторонние плагины, используемые в Интернете.
Кода -копия выглядит следующим образом:
TIP2: $ SCOPE. $ DIGEST VS $ SCOPE. $ APPLY
Я считаю, что многие люди знакомы с методом применения $. Обычно он используется при выполнении кода в среде NG, чтобы обеспечить синхронизацию данных страницы, вызывая метод применения $ после того, как выполнение кода запустит внутренний дайджест $ для проверки всех моделей в области области. На самом деле, это называется внутри него, и только некоторые фрагменты кода написаны ниже.
Кода -копия выглядит следующим образом:
...
...
$ rootscope. $ Digest
...
...
Все они на самом деле вызывают $ Digest под корнем $ Rootscope. Так в чем же разница между $ Digest под разными областями? На самом деле, наиболее важное отличие заключается в том, что
Кода -копия выглядит следующим образом:
$ Digest только глубокий поиск всех моделей ниже вызывающего абонента
Следовательно, по сравнению с $ Scope, $ Rootscope, это экономит много времени, чтобы найти модели.
Однако, если вы хотите обеспечить синхронизацию всех данных модели на странице, вам все равно придется вызовать $ rootcope, поэтому лучше всего подумать о том, какие данные следует синхронизировать перед написанием кода.
TIP3: Звоните в NG-повторить как можно меньше
NG-Repeat создаст много слушателей по умолчанию, поэтому, когда объем данных большой, это потребляет производительность страницы. Я думаю, что NG-Repeat требуется только тогда, когда вам нужно часто обновлять список данных, в противном случае это было бы пустой тратой, чтобы поставить там так много слушателей. В настоящее время вы можете использовать собственную службу интерполяции NG для анализа фрагмента кода, аналогичного статическому шаблонному двигателю, который в основном опирается на сервис базового анализа NG $ parse, а затем напрямую назначает эти фрагменты кода после заполнения данных в одноразовую модель.
TIP4: Попробуйте написать натуральный синтаксис в команде
Хотя NG предоставляет много инструкций, таких как NG-Show и NG-HIDE, их функция состоит в том, чтобы отобразить или скрыть фрагмент кода на основе истинного и ложного модели. Хотя он может быстро реализовать бизнес -требования, эти инструкции по -прежнему будут добавлять слушателей по умолчанию. Если эти фрагменты кода существуют в большой инструкции, лучшим способом состоит в том, чтобы написать аналогичные методы JQ, такие как .show () и .hide () в ссылке инструкции для управления им, которые могут сохранить количество слушателей, и аналогичные инструкции событий. Они могут на самом деле связывать события в периферических инструкциях с помощью AddeVentListener. В любом случае, перед написанием кода лучше всего подумать о том, как минимизировать количество слушателей, чтобы производительность страницы была всесторонне улучшена.
TIP5: Используйте фильтры как можно меньше на странице
При добавлении фильтров за моделью на странице это приведет к тому, что текущая модель будет дважды запускать в $ Digest, вызывая ненужные отходы производительности. Первый раз, когда изменяется задача обнаружения $$ Watchers; Второй раз происходит, когда значение модели модифицируется, поэтому попытайтесь использовать синтаксис фильтра, если встроенный как можно меньше. Например, следующее сильно влияет на производительность страницы
Рекомендуется использовать службу $ Filter, чтобы вызвать функцию фильтра в фоновом режиме, что может значительно улучшить производительность страницы. Код выглядит следующим образом
Кода -копия выглядит следующим образом:
$ filter ('filter') (массив, выражение, компаратор);
Суммировать
Выше приведено несколько советов по повышению производительности проектов NG. Хотя NG очень мощный, нерегулярный код также разрушит его производительность. Поэтому лучше всего подумать о том, где слушатели не нужны перед написанием кода.