it-swarm.com.de

Angular Material - Unterschied zwischen flachen und geschachtelten Bäumen

Flacher Baum:

In einem flachen Baum ist die Hierarchie abgeflacht. Knoten werden nicht ineinander gerendert, sondern nacheinander als Geschwister gerendert

Geschachtelter Baum:

In der verschachtelten Struktur werden untergeordnete Knoten in ihrem übergeordneten Knoten in DOM platziert. Der übergeordnete Knoten verfügt über einen Ausgang, an dem alle untergeordneten Knoten aufbewahrt werden.

Ich habe eine 800-Elemente-Nomenklatur, die ich anhand eines flachen Baums anzeige.
Ich habe zuerst versucht, einen verschachtelten Baum zu verwenden, da er am besten geeignet erschien. Es dauert einen Augenblick, bis der Baum erstellt ist, aber das DOM benötigt 5 Sekunden, um den Baum zu laden. Deshalb habe ich den flachen Baum ausprobiert und er funktioniert jetzt perfekt.

Die Frage ist, wozu ein verschachtelter Baum verwendet werden sollte, wenn das Ergebnis des flachen Baums dasselbe ist. Der Baum wird korrekt gerendert und das DOM versteht seine Hierarchie.

DOM des flachen Baums:

 Flat tree's DOM

Ein verschachtelter Baum ist schwerer zu erstellen und überlastet das DOM bei jeder Anzeige deutlich. Was kann ein verschachtelter Baum, was ein flacher Baum nicht kann? Das Material doc ist unklar.

7

Unabhängig davon, ob der HTML-Code dynamisch über Anagular oder einfach als Flatfile gerendert wird, hat ein verschachtelter Baum einige entscheidende Vorteile.

  • Sie können das Sprudeln von Ereignissen nutzen, wodurch die Menge an Code, die zum Erfassen der Benutzerinteraktion mit dem DOM geschrieben werden muss, erheblich reduziert werden kann. Wenn Sie mehr als ein Ereignis erfassen müssen, kann dies auch durch Verschachtelung erleichtert werden.
  • Sie haben mehr Kontrolle über die Formatierung, indem Sie das Styling auf übergeordnete Knoten anwenden können, die von untergeordneten Elementen geerbt werden.
  • Geschachtelte Bäume sind von großem Vorteil, wenn CSS-Präprozessoren wie LESS oder Sass verwendet werden. Reduziert die Anzahl der zu schreibenden Stile erheblich.
  • Während die Leistung zwischen dem Rendern der beiden Strukturen gleich sein kann, gilt als Faustregel, dass je weniger DOM-Elemente desto besser sind, wenn Sie Benutzer mit langsamen Verbindungen oder schlechten mobilen Diensten berücksichtigen müssen.
1
Aaron Bazzone