jQuery oder Javascript, um die Speichernutzung der Seite zu ermitteln

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.

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).

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

• Messen der Seitenladegeschwindigkeit mit dem Navigations-Timing

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);

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.

Verwenden Sie das Chrome Heap Snapshot-Tool

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

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.

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).

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!

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.

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>