jQuery oder Javascript, um die Speichernutzung der Seite zu ermitteln

98

Gibt es eine Möglichkeit herauszufinden, wie viel Speicher von einer Webseite oder von meiner jquery-Anwendung verwendet wird?

Hier ist meine Situation:

Ich erstelle eine datenintensive Webanwendung mit einem JQuery-Frontend und einem erholsamen Backend, das Daten in JSON bereitstellt. Die Seite wird einmal geladen und dann passiert alles über Ajax.

Die Benutzeroberfläche bietet Benutzern die Möglichkeit, mehrere Registerkarten innerhalb der Benutzeroberfläche zu erstellen, und jede Registerkarte kann viele, viele Daten enthalten. Ich denke darüber nach, die Anzahl der Registerkarten zu begrenzen, die sie erstellen können, dachte aber, es wäre schön, sie erst zu begrenzen, wenn die Speichernutzung einen bestimmten Schwellenwert überschritten hat.

Basierend auf den Antworten möchte ich einige Klarstellungen machen:

  • Ich suche nach einer Laufzeitlösung (nicht nur nach Entwicklertools), damit meine Anwendung Aktionen basierend auf der Speichernutzung im Browser eines Benutzers ermitteln kann.
  • Das Zählen von DOM-Elementen oder der Dokumentgröße ist möglicherweise eine gute Schätzung, kann jedoch recht ungenau sein, da keine Ereignisbindung, data (), Plugins und andere speicherinterne Datenstrukturen enthalten sind.
Tauren
quelle
Sie sollten den Benutzertyp für Ihre Webanwendung untersuchen, um festzustellen, ob bei der Verwendung Ihrer Webanwendung Speicherprobleme auftreten oder nicht. Oder haben Sie selbst Speicher- / Leistungsprobleme mit Ihrer Webanwendung?
Prutswonder
@ Prutswonder: Nein, ich habe keine Probleme, aber ich war nur neugierig, ob es ein solches Tool gibt. Ich dachte nur, dass eine dynamische Methode cool sein könnte, anstatt nur ein festes Limit für die Registerkarten festzulegen.
Tauren
Ich habe der Frage nur einige zusätzliche Details hinzugefügt, um zu verdeutlichen, dass ich nach einer Laufzeitlösung und nicht nach einer Build-Time-Lösung suche.
Tauren
2
Nur eine Frage, wenn etwas bereits zwischengespeichert wurde, zählt das dann noch?
Ajax333221

Antworten:

65

Update 2015

Im Jahr 2012 war dies nicht möglich, wenn Sie alle gängigen Browser unterstützen wollten. Leider ist dies derzeit noch eine reine Chrome- Funktion (eine nicht standardmäßige Erweiterung von window.performance).

window.performance.memory

Browserunterstützung: Chrome 6+


2012 Antwort

Gibt es eine Möglichkeit herauszufinden, wie viel Speicher von einer Webseite oder von meiner jquery-Anwendung verwendet wird? Ich suche nach einer Laufzeitlösung (nicht nur nach Entwicklertools), damit meine Anwendung Aktionen basierend auf der Speichernutzung im Browser eines Benutzers ermitteln kann.

Die einfache aber richtige Antwort lautet nein . Nicht alle Browser stellen Ihnen solche Daten zur Verfügung. Und ich denke, Sie sollten die Idee einfach fallen lassen, weil die Komplexität und Ungenauigkeit einer "handgemachten" Lösung mehr Probleme mit sich bringen kann, als sie löst.

Das Zählen von DOM-Elementen oder der Dokumentgröße ist möglicherweise eine gute Schätzung, kann jedoch recht ungenau sein, da keine Ereignisbindung, data (), Plugins und andere speicherinterne Datenstrukturen enthalten sind.

Wenn Sie wirklich an Ihrer Idee festhalten möchten, sollten Sie feste und dynamische Inhalte trennen.

Feste Inhalte hängen nicht von Benutzeraktionen ab (Speicher, der von Skriptdateien, Plugins usw. verwendet wird).
Alles andere wird als dynamisch angesehen und sollte Ihr Hauptaugenmerk bei der Festlegung Ihres Limits sein.

Es gibt jedoch keine einfache Möglichkeit, sie zusammenzufassen. Sie können ein Tracking- System implementieren , das alle diese Informationen sammelt. Alle Operationen sollten die entsprechenden Verfolgungsmethoden aufrufen. z.B:

Wrap- oder Overwrite- jQuery.dataMethode, um das Tracking- System über Ihre Datenzuordnungen zu informieren .

Wickeln Sie HTML-Manipulationen so ein, dass das Hinzufügen oder Entfernen von Inhalten ebenfalls nachverfolgt wird (dies innerHTML.lengthist die beste Schätzung).

Wenn Sie große In-Memory-Objekte behalten, sollten diese ebenfalls überwacht werden.

Für die Ereignisbindung sollten Sie die Ereignisdelegierung verwenden. Dies kann dann auch als etwas fester Faktor angesehen werden.

Ein weiterer Aspekt, der es schwierig macht, Ihren Speicherbedarf richtig einzuschätzen, besteht darin, dass verschiedene Browser den Speicher möglicherweise unterschiedlich zuordnen (für Javascript-Objekte und DOM-Elemente).

gblazex
quelle
Benötigt man nicht innerHTML.lengthSpeicher oder RAM oder CPU (oder irgendetwas anderes, ich habe keine Ahnung), um es auch zu verarbeiten?
MrReiha
Die Browserunterstützung für diese Funktion ist NICHT IE9 + oder etwas anderes als Chrome. Window.performance.memory ist nur Chrome. docs.webplatform.org/wiki/apis/timing/properties/memory
Blunderfest
Sie haben Recht, ich dachte, das Gedächtnis sei Teil des Navigations-Timing-Standards und des window.performanceObjekts. Die alten Einträge "unterstützt von" galten für diesen Standard. window.performance.memorywird von Chrome als nicht standardmäßige Erweiterung angesehen.
Gblazex
Um die Echtzeit-Speicherüberwachung über window.performance.memory zu aktivieren, müssen Sie Chrome mit dem Flag --enable-precic-memory-info starten.
Kluverua
Update: Opera unterstützt dies ebenfalls. Quelle: Mozilla. developer.mozilla.org/en-US/docs/Web/API/…
HoldOffHunger
39

Sie können die Navigations-Timing-API verwenden .

Navigation Timing ist eine JavaScript-API zur genauen Messung der Leistung im Web. Die API bietet eine einfache Möglichkeit, nativ genaue und detaillierte Zeitstatistiken für die Seitennavigation und Ladeereignisse abzurufen.

window.performance.memory Ermöglicht den Zugriff auf JavaScript-Speichernutzungsdaten.


Literatur-Empfehlungen

Sindre Sorhus
quelle
Toller Vorschlag. Danke dir.
MaximOrlovsky
21

Diese Frage ist 5 Jahre alt und sowohl Javascript als auch Browser haben sich in dieser Zeit unglaublich weiterentwickelt. Da dies jetzt möglich ist (zumindest in einigen Browsern) und diese Frage das erste Ergebnis ist, wenn Sie Google "Javascript Show Memory Useage" verwenden, dachte ich, ich würde eine moderne Lösung anbieten.

memory-stats.js: https://github.com/paulirish/memory-stats.js/tree/master

Dieses Skript (das Sie jederzeit auf jeder Seite ausführen können) zeigt die aktuelle Speichernutzung der Seite an:

var script=document.createElement('script');
script.src='https://rawgit.com/paulirish/memory-stats.js/master/bookmarklet.js';
document.head.appendChild(script);

Dustin Brownell
quelle
1
Dies scheint die Auslastung des JS-Speichers und nicht die Auslastung des Seitenspeichers zu melden.
Laut
Für die Github-Seite von bookmarklet.js ist keine Lizenz aufgeführt, daher handelt es sich vermutlich um urheberrechtlich geschütztes geistiges Eigentum. Das lässt ein gewisses Maß an Unsicherheit in Abhängigkeit von diesem Projekt.
HoldOffHunger
8

Ich weiß nicht, wie Sie tatsächlich herausfinden können, wie viel Speicher vom Browser verwendet wird, aber Sie können möglicherweise eine Heuristik verwenden, die auf der Anzahl der Elemente auf der Seite basiert. Wenn Sie jQuery verwenden, können Sie dies tun, $('*').lengthund Sie erhalten die Anzahl der DOM-Elemente. Ehrlich gesagt ist es wahrscheinlich einfacher, nur einige Usability-Tests durchzuführen und eine feste Anzahl von zu unterstützenden Registerkarten zu finden.

Tvanfosson
quelle
3
@tvanfosson: Keine schlechte Idee, aber dies gibt mir keine Informationen über Nicht-DOM-Speicher wie .data () und in Speicherdatenstrukturen. Aber es könnte eine gute Schätzung des Gesamtgewichts geben, das ich verwenden könnte.
Tauren
4

Verwenden Sie das Chrome Heap Snapshot-Tool

Es gibt auch ein Firebug-Tool namens MemoryBug, aber es scheint noch nicht sehr ausgereift zu sein.

Pablo Fernandez
quelle
@Pablo: Danke. Ich werde sicherlich Entwickler-Tools verwenden, hatte aber gehofft, etwas zu finden, das ich zur Laufzeit verwenden könnte, um die Speichernutzung im Browser jedes Benutzers zu ermitteln.
Tauren
3

Wenn Sie nur zum Testen sehen möchten, gibt es in Chrome über die Entwicklerseite eine Möglichkeit, die Speichernutzung zu verfolgen, aber nicht sicher, wie Sie dies direkt in Javascript tun sollen.

Zachary K.
quelle
@ Zachary: Danke. Ich werde sicherlich Entwickler-Tools verwenden, hatte aber gehofft, eine Laufzeitanalyse-Lösung zu finden.
Tauren
1
Wenn Sie einen finden, lassen Sie es mich wissen, ich würde gerne einen zur Hand haben
Zachary K
3

Ich möchte eine völlig andere Lösung als die anderen Antworten vorschlagen, nämlich die Geschwindigkeit Ihrer Anwendung zu beobachten und, sobald sie unter die definierten Ebenen fällt, dem Benutzer entweder Tipps zum Schließen von Registerkarten anzuzeigen oder das Öffnen neuer Registerkarten zu deaktivieren. Eine einfache Klasse, die diese Art von Informationen bereitstellt, ist beispielsweise https://github.com/mrdoob/stats.js . Abgesehen davon ist es für eine so intensive Anwendung möglicherweise nicht ratsam, zunächst alle Registerkarten im Speicher zu belassen. Beispielsweise kann es sicherer sein, nur den Benutzerstatus beizubehalten (scrollen) und jedes Mal alle Daten zu laden, wenn alle bis auf die letzten beiden Registerkarten geöffnet werden.

Schließlich haben Webkit-Entwickler das Hinzufügen von Speicherinformationen zu Javascript diskutiert, aber sie haben eine Reihe von Argumenten darüber erhalten, was und was nicht verfügbar gemacht werden sollte. In beiden Fällen ist es nicht unwahrscheinlich, dass diese Art von Informationen in einigen Jahren verfügbar sein wird (obwohl diese Informationen derzeit nicht allzu nützlich sind).

David Mulder
quelle
1

Perfektes Timing für Fragen, wenn ich mit einem ähnlichen Projekt beginne!

Es gibt keine genaue Möglichkeit, die Nutzung des JS-Speichers in der App zu überwachen, da hierfür höhere Berechtigungen erforderlich wären. Wie in den Kommentaren erwähnt, wäre das Überprüfen der Anzahl aller Elemente usw. Zeitverschwendung, da gebundene Ereignisse usw. ignoriert werden.

Dies wäre ein Architekturproblem, wenn Speicherlecks manifest sind oder nicht verwendete Elemente bestehen bleiben. Es wäre perfekt, sicherzustellen, dass der Inhalt geschlossener Registerkarten vollständig gelöscht wird, ohne dass Event-Handler usw. verweilen. Unter der Annahme, dass dies erledigt ist, können Sie einfach eine starke Nutzung in einem Browser simulieren und die Ergebnisse der Speicherüberwachung extrapolieren (geben Sie about: memory in die Adressleiste ein).

Protip: Wenn Sie dieselbe Seite in IE, FF, Safari ... und Chrome öffnen; Wenn Sie dann zu about: memory in Chrome navigieren , wird die Speichernutzung in allen anderen Browsern gemeldet . Ordentlich!

ov
quelle
0

Möglicherweise möchten Sie, dass der Server die Bandbreite für diese Sitzung protokolliert (wie viele Datenbytes an ihn gesendet wurden). Wenn sie das Limit überschreiten, sollte der Server anstelle von Daten über Ajax einen Fehlercode senden, den Javascript verwendet, um dem Benutzer mitzuteilen, dass er zu viele Daten verwendet hat.

Nocken
quelle
@incrediman: Das ist auch eine coole Idee, aber ich denke nicht, dass es funktionieren würde, ohne viele Tracking-Funktionen einzubauen - nur eine Byteanzahl würde nicht funktionieren. Das Problem ist, dass die Daten auf einer Registerkarte eine Liste sind, die der Benutzer auf viele verschiedene Arten filtert und sortiert. Jedes Mal, wenn sie Änderungen vornehmen, werden neue Daten vom Server abgerufen und ersetzen die aktuellen dom-Elemente. Und was bedeutet es, dass sie nicht auf "Neu laden" klicken und mit einer neuen Seite beginnen? Ich müsste dann auch 304s und dergleichen verfolgen, aber ich beabsichtige, nur statisches HTML bereitzustellen, alle Daten stammen von einem REST-Service.
Tauren
Dieser Ansatz berücksichtigt keine Elemente, die mit createElement () oder remove () erstellt oder zerstört wurden und die die Speichernutzung des Clients beeinträchtigen würden. Interessanterweise unterscheidet es sich jedoch von anderen Antworten (durch Messen auf der Serverseite und nicht auf der Clientseite ändern Ihre Messungen nicht den Speicher, wie dies bei anderen Antworten der Fall wäre).
HoldOffHunger
0

Sie können die Datei document.documentElement.innerHTML abrufen und ihre Länge überprüfen. Es würde Ihnen die Anzahl der von Ihrer Webseite verwendeten Bytes geben.

Dies funktioniert möglicherweise nicht in allen Browsern. So können Sie alle Ihre Körperelemente in einem riesigen Div einschließen und innerhtml auf diesem Div aufrufen. Etwas wie<body><div id="giantDiv">...</div></body>

Midhat
quelle
4
Es innerHTMList unwahrscheinlich, dass die Länge der generierten Zeichenfolge sinnvoll mit dem Speicher korreliert, den der Browser verwendet (z. B. in seinem internen Objektmodell), um diesen HTML-Code zu rendern.
TJ Crowder
und warum ist das? Mein Grundgedanke ist, dass Text, der in den Browser geladen wird, im Speicher gespeichert werden muss. SO gibt es ein gewisses Maß an Speicher, der vom Browser zum Rendern der Seite verwendet wird.
Midhat
4
Denken Sie so darüber nach. Wenn Sie sagen "Ich möchte Ihnen 10 Millionen Dollar geben", sind das 8 Wörter. Wenn Sie dagegen sagten "Ich möchte auf Ihrer Serviette niesen", ist das 7. Ist die erste nur 8/7 wertvoller als die zweite?
Intuitiert
1
Dies ähnelt dem Vorschlag von @tvanfosson, die Anzahl der DOM-Elemente zu ermitteln. Ihre ist wahrscheinlich etwas genauer, da verschiedene dom-Elemente unterschiedliche Textmengen enthalten können. Es werden jedoch immer noch keine Informationen zu data (), Click-Handern, Speicherdatenstrukturen und -objekten usw. abgerufen. Meine App verwendet viele dieser Funktionen.
Tauren
1
Es können JS-Variablen im Bereich vorhanden sein, die auf getrennte DOM-Knoten verweisen, die nicht Teil des Dokumentelements sind. Sie können auch Code schreiben, um einfach eine wirklich lange Zeichenfolge in eine Variable zu laden, die Gigabyte Speicher verbraucht, ohne den Text auf der Seite zu beeinflussen.
Josh Ribakoff