Umgang mit Layern

[Questioner]

Hallo Leute,

ich erstelle oft Webanwendungen, bei welchen selten die Seite neu gleaden wird, dafür sehr viel Benutzerinteraktion über Layer realisiert werden. Dabei ist es egal, ob es sich einfach nur um eine Message Box handelt (z.B. für Warnmeldungen oder Ja/Nein-Abfragen) oder um sehr komplexe Layerinhalte mit viel implementierter Logik (z.B. Prdouktpflege, etc.).

Obwohl ich da schon viel umgesetzt habe, stelle ich mir immer wieder die Frage, wie ich mit Layern am besten umgehen sollte:

1. Den Layer nach dem Schließen ausblenden (oder in einen ausgeblendeten Node schieben) und bei der nächsten Anzeige wiederverwenden und reinitialisieren oder
   
2. den Layer nach dem Schließen wegwerfen (removeChild) und bei der nächsten Anzeige neu erstellen.
   

Rein aus Entwicklungssicht würde ich die 2. Variante bevorzugen, denn gerade komplexe Layer nach der Benutzerinteraktion auf den Ursprung zurückzusetzen kann sehr aufwändig und fehleranfällig sein. Wenn der Layer einfach neu erstellt wird, hat man immer eine fest definierte Ausgangsbasis, die einheitlich initialisiert werden kann. Zudem kann das HTML-Gerüst des Layers per Ajax geladen werden und muss nicht aufwändig per JavaScript erzeugt werden oder als Template bereits im DOM verweilen, obwohl es ggf. gar nicht benötigt wird. Und die Variante erleichtert die modulare Programmierung.

Dagegen spricht aber

• die längere Erstellzeit (was aber eher ein theoretisches Problem sein dürfte),
  
• bei Laden mittels Ajax eine höhere Datenübertragun
  
• meine Ungwissheit, wie Browser mit gelöschten Elementen (die ja auch JS-Events triggern) umgehen bzw. ob sich regelmäßiges Erstellen/Löschen/Erstellen/Löschen nicht irgendwann auf die Performance niederschlägt, wenn die gelöschten Elemente noch irgendwo im Speicher verweilen, bis die Seite neu geladen wird.
  

Was denkt ihr? Was ist wohl der beste Weg? Gibt es da best practice Änsätze?

Beste Grüße!

[rzscout]

Moin,
was meinst du mit Layer?
Also Inhalte solltest du immer mit JavaScript generieren. Per Ajax solltest du nur Daten laden und diese aufbereiten sowie diese dann ausgeben in den Element die du erstellt hast mithlfe von JavaScript. Du solltest vermeiden ganze HTML-Blöcke über Ajax zu empfangen. Nutze XML oder JSON für die Datenübermittlung.

Meine Empfehlung: Nicht mehr benötigte Inhalte wie Formulare usw. mithilfe der remove-Methode aus dem DOM löschen. Und auch die EventListener clearen. Verwende in JavaScript den Strict-Modus und verwende auch let für lokal Varaiblen. Das hält den Speicher sauber,

Viele Grüße

rzscout