wake-up-neo.com

Wann ng-if vs. ng-show / ng-hide bevorzugen?

Ich verstehe, dass ng-show und ng-hide die für ein Element festgelegte Klasse beeinflussen und dass ng-if steuert, ob ein Element als Teil des DOM gerendert wird.

Gibt es Richtlinien für die Auswahl von ng-if anstelle von ng-show/ng-hide oder umgekehrt?

508
Patrice Chalin

Hängt von Ihrem Anwendungsfall ab, aber um den Unterschied zusammenzufassen:

  1. ng-if entfernt Elemente aus dem DOM. Dies bedeutet, dass alle Ihre Handler oder andere mit diesen Elementen verbundene Elemente verloren gehen. Wenn Sie beispielsweise einen Click-Handler an eines der untergeordneten Elemente gebunden haben und ng-if als false ausgewertet wird, wird dieses Element aus DOM entfernt und der Click-Handler funktioniert auch nach ng-if nicht mehr ergibt true und zeigt das Element an. Sie müssen den Handler wieder anbringen.
  2. ng-show/ng-hide entfernt die Elemente nicht aus DOM. Es werden CSS-Stile zum Ein- und Ausblenden von Elementen verwendet (Hinweis: Möglicherweise müssen Sie Ihre eigenen Klassen hinzufügen). Auf diese Weise gehen Ihre Handler, die an Kindern befestigt waren, nicht verloren.
  3. ng-if erstellt einen untergeordneten Bereich, während ng-show/ng-hide dies nicht tut

Elemente, die sich nicht im DOM befinden, wirken sich weniger auf die Leistung aus, und Ihre Webanwendung scheint möglicherweise schneller zu sein, wenn Sie ng-if im Vergleich zu ng-show/ng-hide verwenden. Nach meiner Erfahrung ist der Unterschied vernachlässigbar. Animationen sind möglich, wenn sowohl ng-show/ng-hide als auch ng-if verwendet werden. Beispiele für beide finden Sie in der Dokumentation Angular.

Letztendlich müssen Sie sich die Frage stellen, ob Sie ein Element aus dem DOM entfernen können oder nicht.

695
markovuksanovic

Siehe hier für einen CodePen, der den Unterschied in der Funktionsweise von ng-if/ng-show in Bezug auf DOM demonstriert.

@markovuksanovic hat die Frage gut beantwortet. Aber ich würde es aus einer anderen Perspektive betrachten: Ich würde immer ng-if verwenden und diese Elemente aus DOM herausholen, es sei denn:

  1. sie benötigen aus irgendeinem Grund die Datenbindungen und $watch- auf Ihren Elementen, um aktiv zu bleiben, solange sie unsichtbar sind. Formulare sind hierfür möglicherweise ein guter Fall, wenn Sie die Gültigkeit von Eingaben überprüfen möchten, die derzeit nicht sichtbar sind, um festzustellen, ob das gesamte Formular gültig ist.
  2. Sie verwenden einige wirklich ausgefeilte Stateful-Logik mit bedingten Ereignishandlern, wie oben erwähnt. Das heißt , wenn Sie feststellen, dass Sie Handler manuell anbringen und entfernen, sodass Sie bei der Verwendung von ng-if einen wichtigen Status verlieren, fragen Sie sich, ob dies der Fall ist state würde in einem Datenmodell besser dargestellt, und die Handler würden bei jedem Rendern des Elements durch Direktiven bedingt angewendet. Anders ausgedrückt ist das Vorhandensein/Fehlen von Handlern eine Form von Zustandsdaten. Holen Sie sich diese Daten aus dem DOM und in ein Modell. Das Vorhandensein/Nichtvorhandensein der Handler sollte anhand der Daten bestimmt und daher einfach wiederherzustellen sein.

Angular ist wirklich gut geschrieben. Es ist schnell, wenn man bedenkt, was es tut. Aber was es macht, ist eine ganze Menge Magie, die schwierige Dinge (wie das Binden von Daten in zwei Richtungen) einfach erscheinen lässt. Um all diese Dinge einfach aussehen zu lassen, ist ein gewisser Leistungsaufwand erforderlich. Sie sind möglicherweise schockiert, wenn Sie feststellen, wie oft eine Setter-Funktion während des $digest -Zyklus auf einem DOM-Block ausgewertet wird, auf den niemand überhaupt schaut. Und dann merkt man, dass es Dutzende oder Hunderte unsichtbarer Elemente gibt, die alle dasselbe tun ...

Desktops sind in der Tat leistungsfähig genug, um die meisten Probleme mit der Ausführungsgeschwindigkeit von JS in Frage zu stellen. Wenn Sie jedoch für Mobilgeräte entwickeln, sollte es kein Problem sein, ng-if zu verwenden, wann immer dies menschlich möglich ist. Auf mobilen Prozessoren ist die Geschwindigkeit von JS immer noch wichtig. Die Verwendung von ng-if ist ein sehr einfacher Weg, um potenziell signifikante Optimierungen zu sehr, sehr geringen Kosten zu erzielen.

130
XML

Meiner Erfahrung nach:

1) Wenn Ihre Seite einen Schalter hat, der ng-if/ng-show verwendet, um etwas anzuzeigen/auszublenden, verursacht ng-if eine größere Verzögerung des Browsers (langsamer). Beispiel: Wenn Sie eine Schaltfläche zum Wechseln zwischen zwei Ansichten verwenden, ist ng-show anscheinend schneller.

2) ng-if erstellt/zerstört den Gültigkeitsbereich, wenn er als wahr/falsch ausgewertet wird. Wenn Sie einen Controller an das ng-if angehängt haben, wird dieser Controller-Code jedes Mal ausgeführt, wenn das ng-if als wahr ausgewertet wird. Wenn Sie ng-show verwenden, wird der Controller-Code nur einmal ausgeführt. Wenn Sie also eine Schaltfläche haben, mit der Sie zwischen mehreren Ansichten wechseln können, würde die Verwendung von ng-if und ng-show einen großen Unterschied in der Art und Weise bewirken, wie Sie Ihren Controller-Code schreiben.

53
Yi Z

Die Antwort ist nicht einfach:

Es hängt von den Zielcomputern ab (Mobil oder Desktop), es hängt von der Art Ihrer Daten, dem Browser, dem Betriebssystem und der Hardware ab, auf der sie ausgeführt werden. Sie müssen ein Benchmarking durchführen, wenn Sie es wirklich wissen möchten.

Es handelt sich meistens um ein Problem zwischen Speicher und Berechnung ... Wie bei den meisten Leistungsproblemen kann der Unterschied bei wiederholten Elementen (n) wie Listen erheblich werden, insbesondere wenn verschachtelt (nxn, oder schlimmer) und auch welche Art von Berechnungen, die Sie ausführen diese Elemente:

  • ng-show: Wenn diese optionalen Elemente häufig vorhanden (dicht) sind, wie z. B. in 90% der Fälle, ist es möglicherweise schneller, sie fertig zu haben und sie nur anzuzeigen/auszublenden, insbesondere wenn es sich um Inhalte handelt billig (nur Klartext, nichts zu berechnen oder zu laden). Dies verbraucht Speicher, da es das DOM mit verborgenen Elementen füllt. Es ist jedoch wahrscheinlich, dass das Anzeigen/Verbergen von bereits vorhandenen Elementen eine kostengünstige Operation für den Browser ist.

  • ng-if: Wenn im Gegenteil Elemente wahrscheinlich nicht angezeigt werden (spärlich), erstellen Sie sie einfach und zerstören Sie sie in Echtzeit, insbesondere, wenn ihr Inhalt teuer zu bekommen ist (Berechnungen/sortiert/gefiltert). Bilder, generierte Bilder). Dies ist ideal für seltene oder "On-Demand" -Elemente. Es spart Speicher, da das DOM nicht gefüllt wird, kostet jedoch viel Rechenaufwand (Erstellen/Zerstören von Elementen) und Bandbreite (Abrufen von Remote-Inhalten). Dies hängt auch davon ab, wie viel Sie in der Ansicht berechnen (Filtern/Sortieren) und was bereits im Modell vorhanden ist (vorsortierte/vorgefilterte Daten).

34

Ein wichtiger Hinweis:

ngIf (im Gegensatz zu ngShow) erstellt normalerweise untergeordnete Bereiche, die zu unerwarteten Ergebnissen führen können.

Ich hatte ein Problem damit und habe VIEL Zeit darauf verwendet, herauszufinden, was los war.

(Meine Anweisung hat die Modellwerte in den falschen Bereich geschrieben.)

Verwenden Sie ngShow, wenn Sie nicht zu langsam laufen, um Ihre Haare zu schonen.

Der Leistungsunterschied ist ohnehin kaum spürbar und ich bin mir noch nicht sicher, für wen es ohne Test günstig ist ...

12
user2173353

Wenn Sie ng-show or ng-hide verwenden, wird der Inhalt (z. B. Miniaturansichten vom Server) unabhängig vom Wert des Ausdrucks geladen, jedoch basierend auf dem Wert des Ausdrucks angezeigt.

Wenn Sie ng-if verwenden, wird der Inhalt nur geladen, wenn der Ausdruck des ng-if als wahr ausgewertet wird.

Die Verwendung von ng-if ist eine gute Idee, wenn Sie Daten oder Bilder vom Server laden und diese nur abhängig von der Benutzerinteraktion anzeigen möchten. Auf diese Weise wird das Laden Ihrer Seite nicht durch unnötige und intensive Aufgaben blockiert.

4
appdroid

ng-if bei ng-include und bei ng-controller hat eine große Auswirkung auf ng-include, da es den erforderlichen Teil nicht lädt und nicht verarbeitet wird, sofern das Flag bei ng-controller nicht wahr ist true, aber das Problem ist, wenn ein Flag in ng false wird - wenn es aus dem DOM entfernt wird, wenn das Flag zurück true wird, wird das DOM neu geladen. In diesem Fall ist ng-show besser, einmal show ng-if ist besser

4
Saad Ahmed