Ich bin gerade dabei, einen Ajax-Chat zu debuggen, der die Seite endlos mit DOM-Elementen füllt. Wenn Sie einen Chat für etwa 3 Stunden haben, werden Sie am Ende wissen, wie viele tausend DOM-Knoten.
Was sind die Probleme mit extrem DOM Usage?
Ist es möglich, dass die Benutzeroberfläche nicht mehr reagiert (besonders im Internet Explorer)?
(Und im Zusammenhang mit dieser Frage ist natürlich die Lösung, wenn es andere Lösungen als manuelle Garbage Collection und Entfernung von Dom-Knoten gibt.)
Der modernste Browser sollte ziemlich gut mit riesigen DOM-Bäumen umgehen können. Und "meistens" schließt IE nicht ein.
Also, Ihr Browser reagiert möglicherweise nicht mehr (weil er zu viel RAM benötigt - "swapping") oder weil sein Renderer nur überfordert ist.
Die Standardlösung besteht darin, Elemente zu löschen, zum Beispiel nachdem die Seite 10'000 Zeilen Chat hat. Selbst 100'000 Zeilen sollten kein großes Problem sein. Aber ich würde mich unwohl fühlen für Zahlen, die viel größer sind (sagen wir Millionen von Zeilen).
[EDIT] Ein weiteres Problem sind Speicherlecks. Obwohl JS Garbage Collection verwendet, wenn Sie einen Fehler in Ihrem Code machen und Referenzen auf gelöschte DOM-Elemente in globalen Variablen (oder Objektverweisen von einer globalen Variablen) behalten, können Sie nicht genügend Arbeitsspeicher haben, obwohl die Seite selbst nur wenige enthält tausend Elemente.
Nur mit vielen DOM-Knoten sollte kein Problem sein (es sei denn, der Client hat wenig RAM); Die Manipulation vieler DOM-Knoten ist jedoch ziemlich langsam. Zum Beispiel ist das Durchlaufen einer Gruppe von Elementen und das Ändern der Hintergrundfarbe jedes Elements in Ordnung, wenn Sie dies mit 100 Elementen tun, aber es kann eine Weile dauern, wenn Sie es auf 100.000 tun. Außerdem haben einige alte Browser Probleme, wenn sie mit einem riesigen DOM-Baum arbeiten - zum Beispiel kann das Scrollen durch eine Tabelle mit Hunderttausenden von Zeilen unannehmbar langsam sein.
Eine gute Lösung ist es, die Ansicht zu puffern. Grundsätzlich zeigen Sie nur die Elemente an, die zu einem bestimmten Zeitpunkt auf dem Bildschirm sichtbar sind. Wenn der Benutzer scrollt, entfernen Sie die ausgeblendeten Elemente und zeigen diejenigen an, die aufgedeckt werden. Auf diese Weise ist die Anzahl der DOM-Knoten im Baum relativ konstant, aber Sie verlieren wirklich nichts.
Eine andere ähnliche Lösung besteht darin, eine Begrenzung für die Anzahl der Nachrichten festzulegen, die zu einem bestimmten Zeitpunkt angezeigt werden. Auf diese Weise werden etwa 10,00 Nachrichten entfernt, und um sie zu sehen, müssen Sie auf eine Schaltfläche oder einen Link klicken, der mehr anzeigt. Dies ist etwas, was Facebook mit ihren Profilen macht, wenn Sie eine Referenz benötigen.
Probleme mit der extremen DOM-Nutzung können sich auf die Leistung auswirken. DOM-Scripting ist sehr teuer, so dass der ständige Zugriff auf und das Manipulieren des DOM zu einer schlechten Leistung (und Benutzererfahrung) führen kann, insbesondere wenn die Anzahl der Elemente sehr groß wird.
Betrachten Sie HTML-Sammlungen wie zum Beispiel document.getElementsByTagName('div') . Hierbei handelt es sich um eine Abfrage für das Dokument, die jedes Mal erneut ausgeführt wird, wenn aktuelle Informationen erforderlich sind, z. B. die Länge der Sammlung. Dies könnte zu Ineffizienzen führen. Die schlimmsten Fälle treten auf, wenn auf Sammlungen innerhalb von Schleifen zugegriffen wird und diese manipuliert werden.
Es gibt viele Überlegungen und Beispiele, aber wie alles hängt es von der Anwendung ab.
Tags und Links javascript dom performance chat