web-dev-qa-db-de.com

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, die ein JQuery-Frontend und ein ruhiges Backend verwendet, 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. Jede Registerkarte kann viele, viele Daten enthalten. Ich denke darüber nach, die Anzahl der Registerkarten, die sie erstellen können, zu begrenzen, aber ich dachte, es wäre schön, sie erst zu begrenzen, wenn die Speichernutzung einen bestimmten Schwellenwert überschritten hat.

Anhand der Antworten möchte ich einige Erklärungen abgeben:

  • Ich suche nach einer Laufzeitlösung (nicht nur Entwickler-Tools), 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 ungenau sein, da es keine Ereignisbindung, data (), Plugins und andere speicherinterne Datenstrukturen enthält.
89
Tauren

Update 2015

2012 war dies noch nicht möglich, wenn Sie alle gängigen Browser unterstützen wollten. Leider ist dies im Moment immer noch eine nur Chrome Funktion (eine nicht standardmäßige Erweiterung von window.performance).

window.performance.memory

Browser-Unterstü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 Entwickler-Tools), 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 "handgefertigten" Lösung mehr Probleme verursachen kann, als sie löst.

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

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

Feste Inhalte sind nicht abhängig von Benutzeraktionen (von Skriptdateien, Plugins usw. verwendeter Speicher)
Alles andere gilt als dynamisch und sollte Ihr Hauptaugenmerk bei der Festlegung Ihres Limits sein.

Aber es gibt keine einfache Möglichkeit, sie zusammenzufassen. Sie könnten ein tracking System implementieren, das all diese Informationen sammelt. Alle Operationen sollten die entsprechenden Verfolgungsmethoden aufrufen. z.B:

Umbruch oder Überschreiben jQuery.data Methode, um das tracking System über Ihre Datenzuordnungen zu informieren.

Binden Sie HTML-Manipulationen so ein, dass das Hinzufügen oder Entfernen von Inhalten mitverfolgt wird (innerHTML.length ist die beste Schätzung).

Wenn Sie große Objekte im Arbeitsspeicher behalten, sollten diese ebenfalls überwacht werden.

Für die Ereignisbindung sollten Sie Ereignisdelegation verwenden, und dann könnte dies auch als ein etwas fester Faktor angesehen werden.

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

58
gblazex

Sie können die Navigation Timing API verwenden.

Navigation Timing ist eine JavaScript-API zum genauen Messen der Leistung im Web. Die API bietet eine einfache Möglichkeit, genaue und detaillierte Timing-Statistiken für Seitennavigation und Ladeereignisse zu erhalten.

window.performance.memory ermöglicht den Zugriff auf Daten zur Speichernutzung in JavaScript.


Literatur-Empfehlungen

39
Sindre Sorhus

Diese Frage ist 5 Jahre alt und sowohl Javascript als auch Browser haben sich in dieser Zeit unglaublich entwickelt. Da dies nun möglich ist (zumindest in einigen Browsern) und diese Frage das erste Ergebnis ist, wenn Sie Google "Javascript Speicherauslastung anzeigen", 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);
21
Dustin Brownell

Ich kenne keine Möglichkeit, um herauszufinden, wie viel Speicher vom Browser belegt 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 $('*').length ausführen und 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.

8
tvanfosson

Verwenden Sie das Chrome Heap Snapshot Tool

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

4
Pablo Fernandez

Ich würde gerne eine ganz andere Lösung vorschlagen als die anderen Antworten: Beobachten Sie die Geschwindigkeit Ihrer Anwendung und zeigen Sie dem Benutzer beim Unterschreiten definierter Ebenen entweder Tipps zum Schließen von Registerkarten oder deaktivieren Sie das Öffnen neuer Registerkarten. Eine einfache Klasse, die diese Art von Informationen bereitstellt, ist beispielsweise https://github.com/mrdoob/stats.js . Abgesehen davon ist es für eine derart intensive Anwendung möglicherweise nicht ratsam, zunächst alle Registerkarten im Speicher zu belassen. Z.B. Es ist möglicherweise sicherer, nur den Benutzerstatus (Bildlauf) beizubehalten und alle Daten jedes Mal zu laden, wenn alle bis auf die letzten beiden Registerkarten geöffnet werden.

Zuletzt haben Webkit-Entwickler diskutiert, Speicherinformationen zu Javascript hinzuzufügen, aber sie haben eine Reihe von Argumenten darüber erhalten, was und was nicht herausgestellt 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).

3
David Mulder

Wenn Sie nur zu Testzwecken nachsehen möchten, gibt es eine Möglichkeit, die Speichernutzung in Chrome über die Entwicklerseite zu verfolgen.

3
Zachary K

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

Es gibt keine genaue Möglichkeit, die JS-Speichernutzung 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. eine Zeitverschwendung, da gebundene Ereignisse usw. ignoriert werden.

Dies ist ein Architekturproblem, wenn Speicherverluste auftreten oder nicht verwendete Elemente weiterhin vorhanden sind. Es wäre perfekt, sicherzustellen, dass der Inhalt geschlossener Tabs vollständig gelöscht wird, ohne dass Event-Handler usw. verweilen. vorausgesetzt, es ist erledigt, könnten Sie einfach eine starke Auslastung 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 in Chrome zu about: memory navigieren, wird die Speichernutzung in allen anderen Browsern gemeldet. Ordentlich!

1
o.v.

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 des Versendens von Daten über Ajax einen Fehlercode senden, mit dem Javascript dem Benutzer mitteilt, dass sie zu viele Daten verwendet haben.

0
Cam

Sie können das document.documentElement.innerHTML abrufen und dessen 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 auf diesem div innerhtml aufrufen. Etwas wie <body><div id="giantDiv">...</div></body>

0
Midhat