Когда отдать предпочтение нг-если против нг-шоу / нг-скрыть?

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

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

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

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

Настольные компьютеры действительно могут быть достаточно мощными, чтобы справляться с большинством проблем с производительностью JS. Но если вы разрабатываете для мобильных устройств, используя ng - если всякий раз, когда человеческое поведение должно быть без проблем. Скорость 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 будет иметь огромное значение в том, как вы пишете свой код контроллера.

Ответ прост:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

нг-, если

более эффективен, поскольку он решает, нужно ли отображать элемент html или нет. Кроме того, в то же время он решает, создавать ли область и связывать элемент html или нет. Это помогает в производительности.

• ng-hide аналогична функции jquery hide() и show(), где элемент не отображается пользователю, но существует в DOM.

нг-шоу

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

• ng-if похоже на jquery remove() funtion, он не только скрывает элемент, но и также удалите из DOM.

Пример

ng-show=true/ng-hide=false//show the element
ng-show=false/ng-hide=true//hide the element
ng-if =true//show the element from the DOM 
ng-if= false//removes the element from the DOM 

Всегда, используйте ng-if вместо ng-show/ng-hide