Javascript Leistungsprobleme mit zu vielen Dom Knoten?

Question

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 im Zusammenhang mit extreme DOM Verwendung?

Ist es möglich, dass die Benutzeroberfläche nicht mehr reagiert (besonders im Internet Explorer)?

(Und auf diese Frage im Zusammenhang ausgeschaltet ist natürlich die Lösung, wenn es andere Lösungen andere als die manuelle Garbage Collection und Entfernung von dom-Knoten sind.)

Answer 1

Die meisten modernen Browser der Lage sein sollten ziemlich gut mit großen beschäftigen DOM-Bäume. Und "meistens" schließt IE nicht ein.

Also ja, Ihr Browser kann nicht mehr reagieren (weil es zu viel RAM benötigt -> swapping) oder weil sein Renderer gerade überfordert ist.

Die Standardlösung besteht darin, Elemente zu löschen, z. B. 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 anderes Problem ist Speicherlecks. Obwohl JS Garbage Collection verwendet, wenn Sie einen Fehler in Ihrem Code machen und Verweise 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.

Answer 2

Probleme mit extreme DOM-Nutzung kann auf die Leistung herunterkochen. 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.

Answer 3

Nur mit viele DOM-Knoten sollten nicht ein Problem sein müssen (es sei denn, der Client hat wenig RAM); jedoch manipulieren viele DOM-Knoten werden ziemlich langsam sein. 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 inakzeptabel langsam sein.

Eine gute Lösung hierfür ist die Pufferung der Ansicht. 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 der Anzahl der Nachrichten zu implementieren, 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.