Когда отдать предпочтение ng-if против ng-show / ng-hide?

посмотреть здесь для CodePen, который демонстрирует разницу в том, как работает ng-if/ng-show, DOM-wise.

@markovuksanovic хорошо ответил на вопрос. Но я подхожу к этому с другой точки зрения:--8-->всегда использовать ng-if и получить эти элементы из DOM, если:

1. вам по какой-то причине нужны привязки данных и $watch - es на ваших элементах, чтобы оставаться активными, пока они невидимы. Формы могут быть хорошим случаем для этого, если вы хотите иметь возможность проверить действительность на входах, которые в настоящее время не видны, чтобы определить, действительна ли вся форма.
2. вы используете действительно сложную логику состояния с обработчиками условных событий, как упоминалось выше. , который сказал, если вы обнаружите, что вручную подключаете и отсоединяете обработчики, так что вы теряете важное состояние при использовании ng-if, спросите себя, будет ли это состояние лучше представлено в модели данных, и обработчики, применяемые условно директивами при отображении элемента. Иными словами, наличие/отсутствие обработчиков является формой данных состояния. Получите эти данные из DOM и в модель. Наличие / отсутствие обработчиков должно определяться данными и, следовательно, легко воссоздаваться.

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

настольные компьютеры действительно могут быть достаточно мощными, чтобы сделать большинство проблем скорости выполнения JS спорными. Но если вы развиваетесь для мобильный, используя ng-if, когда это возможно, должен быть без проблем. Скорость JS по-прежнему имеет значение для мобильных процессоров. Использование ng-if-очень простой способ получить потенциально значительную оптимизацию при очень, очень низкой стоимости.

из моего опыта:

1) Если ваша страница имеет переключатель, который использует ng-if/ng-show, чтобы показать/скрыть что-то, ng-if вызывает больше задержки браузера (медленнее). Например: если у вас есть кнопка, используемая для переключения между двумя представлениями, ng-show кажется быстрее.

2) ng-if создаст/уничтожит область, когда она будет равна true/false. Если у вас есть контроллер, подключенный к ng-if, этот код контроллера будет выполняться каждый раз, когда ng-if оценивается как true. Если вы используете ng-show, код контроллера выполняется только один раз. Поэтому, если у вас есть кнопка, которая переключается между несколькими представлениями, использование ng-if и ng-show будет иметь огромное значение в том, как вы пишете код контроллера.

ответ не простой:

Это зависит от целевых машин (mobile vs desktop), это зависит от характера ваших данных, браузера, ОС, оборудования, на котором он работает... вам нужно будет проверить, если вы действительно хотите знать.

Это в основном проблема памяти и вычислений ... как и в большинстве проблем с производительностью, разница может стать значительной с повторяющимися элементами (N) как списки, особенно, когда вложенные (n x n, или хуже) а также что за вычисления, которые вы запускаете внутри эти элементы:

• ng-show: если эти дополнительные элементы часто присутствуют (плотные), например, 90% время, это может быть быстрее, чтобы они были готовы и только показать / скрыть их, особенно если их содержимое дешево (просто текст, ничего не вычислять или загружать). Это потребляет память, поскольку она заполняет DOM скрытыми элементами, но просто показывает/скрывает то, что уже существует, вероятно, будет дешевая работа для браузера.

• ng-if: если, наоборот, элементы, скорее всего, не будут показаны (разреженные), просто создайте их и уничтожьте в режиме реального времени, особенно если их содержимое дорого получить (вычисления/сортировка/фильтрация, изображения, сгенерированные изображения). Это идеально подходит для редких или "по требованию" элементов, это экономит память с точки зрения не заполнения DOM, но может стоить много вычислений (создание/уничтожение элементов) и пропускной способности (получение удаленного содержание.) Это также зависит от того, сколько вы вычисляете в представлении (фильтрация/сортировка) против того, что у вас уже есть в модели (предварительно отсортированные/предварительно отфильтрованные данные).

важное замечание:

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

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

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

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

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

НГ-если на НГ-включите и на НГ-регуляторе будет иметь большое дело удара на ng-include он не будет загружать требуемый частичный и не обрабатывает, если флаг не true на ng-controller он не будет загружать контроллер, если флаг не true но проблема в том, когда флаг получает false в ng-если он будет удален из DOM, когда флаг получает true, он перезагрузит DOM в этом случае ng-show лучше, за один раз показать ng-if лучше

Если вы используете ng-show or ng-hide контент (например. миниатюры с сервера) будут загружаться независимо от значения выражения, но будут отображаться на основе значения выражения.

Если вы используете ng-if содержимое будет загружено только в том случае, если выражение ng-if имеет значение truthy.

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