Object-Routen-View-Models
- Vorher → nachher
- 846 → 1451
- Delta
- +605
- Delta / Iteration
- +121
Memory Leaks finden
Wiederholen Sie die Navigation und prüfen Sie, welche Objekte nach der Rückkehr zur Ausgangsseite im Speicher bleiben. Untersuchen Sie die gemessene Zunahme.
Berichtsfragment
Sehen Sie, welche Gruppe zwischen den Iterationen wächst
Beispiel für Navigation und Rückkehr. Die Werte erklären den Bericht und sind keine Ergebnisse Ihrer Website.
Routenwechsel
/catalog → /product → /catalog × 5
Der Seitenwechsel ist beendet, aber Zustandsobjekte der vorherigen Seite bleiben im Speicher. Ihre Anzahl wächst mit jeder Wiederholung. Prüfen Sie, welche Referenzen sie halten.
Set<observerTarget>
- Vorher → nachher
- 34 → 74
- Delta
- +40
- Delta / Iteration
- +8
nativer Speicher
- Vorher → nachher
- 41.2 → 54.7 MB
- Delta
- +13.5 MB
- Delta / Iteration
- +2.7 MB
Beispieldaten zur Erklärung des Berichts. Ergebnisse Ihrer Seite erscheinen nach der Prüfung.
So funktioniert's
Wir wiederholen ein Szenario und zählen das Delta zwischen den Durchläufen
Szenario
Links auf der Seite auswählen
Der Scanner findet bis zu drei sichtbare interne Links. Er wiederholt jeden Wechsel und die Rückkehr zur Ausgangsseite fünfmal.
Delta
Speicherverbrauch vergleichen
Nach einem Aufwärmdurchlauf messen wir den nach wiederholten Seitenwechseln belegten Speicher. So wird eine Ansammlung sichtbar, die beim ersten Laden nicht auffällt.
Wachstumsgruppen
Zeigen, was sich ansammelt
Der Bericht nennt wachsende Collections, Event-Listener, DOM-Knoten und Objekttypen. Für Collections zeigt er, soweit verfügbar, auch die Änderungsstellen im Code.
Analysemodule
Was in den Memory-Leak-Bericht einfließt
Szenario
Geprüftes Szenario
Der Bericht speichert die URL, den geprüften Nutzerpfad, die Iterationsanzahl und das Leck-Flag, damit der Befund reproduziert werden kann.
LeckURLIterationen
Delta
Gesamtes Speicherwachstum
Vergleichen Sie Gesamtwachstum und Wachstum pro Durchlauf für dieselbe Navigation. Eine Akkumulation ist ein Anlass, gehaltene Objekte zu untersuchen. Auch beabsichtigte Caches und der Anwendungszustand können Speicher belegen.
Gesamtdeltapro IterationSpeicherstatistiken
Sammlungen
Array, Map, Set, Object
Wachsende Collections werden separat aufgeführt: Größe vorher und nachher, Delta, Delta pro Iteration und Stacktraces, wo sich die Collection geändert hat.
MapObjectStacktrace
Listener
Event-Listener und Nodes
Der Bericht zeigt die Listener-Anzahl vor und nach dem Szenario, das resultierende Delta und leckende Listener-Nodes, bei denen die Abonnements wachsen.
vorher / nachherNode-Deltapro Iteration
DOM
Wachstum von DOM-Nodes
Der Bericht zeigt das Wachstum von DOM-Nodes und Beschreibungen leckender Nodes, wodurch sich losgelöste DOM-Elemente oder wiederholte Interface-Initialisierungen leichter finden lassen.
Node-AnzahlBeschreibunglosgelöst
Heap-Objekte
Heap-Objekttypen
Für wachsende Objekttypen enthält der Bericht das Anzahl-Delta, Größen-Delta, Delta der retained Size und die Werte pro Iteration. Wenn Umgebungsdaten vorhanden sind, werden Gesamt-, Native- und V8-Heap separat angezeigt.
Anzahl-DeltaGrößen-Deltaretained
FAQ
Häufig gestellte Fragen zu Memory Leaks
Kurze Antworten zu Delta pro Iteration, wachsenden Collections, Listenern, DOM-Nodes und den nächsten Schritten nach dem Bericht.
Ist jeder Speicherzuwachs ein Leck?
Nein. Eine Anwendung kann weiterhin benötigte Daten behalten. Der Scanner sucht bei wiederholten Seitenwechseln nach Ansammlungen, kennt aber den Datenbedarf Ihrer Anwendung nicht. Prüfen Sie, was die Objekte hält und ob sie nach der Rückkehr freigegeben werden sollten.
Was sind abgetrennte DOM-Knoten?
Das sind aus dem Dokument entfernte Elemente, die durch JavaScript-Referenzen im Speicher bleiben. Ein geschlossenes Dialogfenster kann zum Beispiel noch referenziert sein. Knotenbeschreibungen grenzen die Suche ein; prüfen Sie die haltende Referenz im Code.
Kann die Prüfung Lecks bei Event-Listenern finden?
Ja. Der Bericht zeigt die Listener-Anzahl vor und nach, das Gesamtdelta, das Delta pro Iteration und leckende Listener-Nodes mit dem Delta der Node-Anzahl. So lässt sich ein einmaliges Abonnement von Handlern unterscheiden, die bei jeder Wiederholung hinzugefügt werden.
Welche Seiten und Aktionen prüft der Scanner?
Die Prüfung richtet sich an SPAs mit Navigation ohne vollständiges Neuladen. Der Scanner wählt bis zu drei sichtbare interne Links und wiederholt Hin- und Rücknavigation. Formulare, Suche und das Öffnen von Dialogen werden nicht separat geprüft. Fehlen geeignete Links, schlägt die Prüfung fehl; das bedeutet nicht, dass keine Lecks bestehen.
Was sollte ich tun, nachdem ich ein Leck gefunden habe?
Wiederholen Sie die gemeldete Navigation. Steigt die Anzahl der Event-Listener bei jeder Rückkehr, suchen Sie die Stelle, an der die Komponente sie hinzufügt, und prüfen Sie die Bereinigung. Untersuchen Sie haltende Referenzen, statt sich allein auf die Leak-Markierung zu verlassen. Vergleichen Sie nach der Korrektur denselben Pfad mit derselben Anzahl an Durchläufen.
Verwandte Dienste
Was als Nächstes bei diesem Dienst geprüft werden sollte
JavaScript-Prüfung
Prüfen Sie JavaScript-Dateien, Ladefehler und beim Laden ungenutzten Code. Finden Sie Skripte, die genauer untersucht werden sollten.
ÖffnenLadegeschwindigkeit
Prüfen Sie das Laden mit den gewählten Geräte- und Netzwerkeinstellungen. Erhalten Sie Geschwindigkeitsmessungen, Ergebnisse und Empfehlungen.
ÖffnenBack-/Forward-Cache
Prüfen Sie, ob der Browser seinen Cache beim Vor- und Zurücknavigieren nutzt. Finden Sie heraus, was das Zwischenspeichern verhindert.
ÖffnenReaktionszeit der Seite (INP)
Messen Sie, wie schnell die Seite auf automatisierte Aktionen reagiert. Finden Sie Verzögerungen im Testlauf.
Öffnen