Dokument Dom Baum gegen Freistehendes Dom Baum?

8

Finde Speicherlecks mit chrome (newbie:))

Wie erkenne ich, wo der Speicher leckt?

Und was ist Document DOM Baum und Detached Dom Baum?

Kann mir jemand erklären?

    
NkS 14.04.2014, 10:04
quelle

1 Antwort

21

Schritte zum Identifizieren von Speicherlecks.

  1. Beginne mit dem inkognitiven Modus Chrome.
  2. Rufen Sie Ihre Bewerbung auf Öffnen
  3. Öffnen Sie das Chrome-Entwicklungstool (ich möchte es maximal in einem eigenen Fenster öffnen)
  4. Klicken Sie auf Profil
  5. Verwenden Sie die Option Take Heap Snapshot und klicken Sie auf Snapshot
  6. Führen Sie einige spezifische Schritte mit Ihrer App durch
  7. Machen Sie einen anderen Schnappschuss, indem Sie auf den schwarzen Kreis in der oberen linken Ecke klicken.
  8. Wiederholen Sie die Schritte 5 bis 7 noch 2 Mal
  9. Überprüfen Sie die beibehaltene Größe - wenn sie weiter zunimmt - haben Sie ein Speicherproblem
  10. Klicken Sie auf der Registerkarte Zeitleiste auf die Schaltfläche Garbage Collector.
  11. Machen Sie einen anderen Schnappschuss und sehen Sie, ob der Speicher auf ein vernünftiges Niveau sinkt.

Schritte zum Identifizieren von getrennten DOM-Bäumen

  1. Um freistehende DOM-Bäume zu erkennen, klicken Sie auf die Registerkarte Profil eines der Snapshots
  2. Sie werden viele Objekte sehen - versuchen Sie, sie zu filtern, indem Sie DOM wie gezeigt eingeben
  3. Wenn Sie irgendwelche DOM Trees sehen, haben Sie möglicherweise ein Problem. Es ist möglich, dass Sie möglicherweise etwas DOM für das Klonen etc. beiseite lassen müssen. Dies muss ausgeschlossen werden. Wenn Sie darüber hinausgehende DOMs sehen, müssen Sie sich darüber Gedanken machen, insbesondere wenn es sich um eine Anwendung für eine einzelne Seite handelt, da andere Apps das Ganze bald neu laden und dadurch möglicherweise der Speicher gelöscht wird.

  4. Sie können die abgelösten DOM-Bäume wie unten gezeigt untersuchen.

  5. Um zu überprüfen, welches DOM es ist, können Sie den Cursor über die roten HTML-Elemente bewegen, wie unten gezeigt. Dies hilft beim Debuggen, sobald Sie das DOM

    6. gefunden haben

Was sind "Dokument-DOM-Bäume"? Das ganze Dokument ist ein großer DOM-Baum darin. Dokument ist XML und die Tags sind verschachtelt und bilden somit einen Baum. (DOM - Document Object Model.)

Was sind also "DOM Trees"?

HTML-Elemente sind Instanzen von Objekten, die Speicher verbrauchen. Jedes dieser Elemente kann Ereignislistener und damit verbundene Daten speichern. Jetzt sind "DOM-DOM-Bäume" nichts anderes als DOMs, die sich im Speicher des Browsers befinden, aber NICHT an den Haupt-DOM-Baum, die "Dokument-DOM-Bäume", angehängt sind.

Indem wir diese hängenden Objekte untersuchen, können wir Probleme erkennen und Speicherlecks vermeiden.

Dieses Problem zu lösen, ist ein riesiges Thema, da Sie dort einige unterschiedliche Lösungen sehen können. Folgen Sie den folgenden Posts für das, was einige Leute getan haben, um das Problem zu beheben.

scheint nicht gelöschte DOM-Elemente zu bereinigen

Javascript-Speicherlecks: DOM-Baum

    
bhantol 08.08.2014, 06:46
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Thymeleaf - Wie String mit Anfrage Parameter in HTML in Thymeleaf-Tag "Th: Wenn" zu vergleichen?