jQuery o javascript per trovare l'utilizzo della memoria della pagina

C'è un modo per scoprire quanta memoria viene utilizzata da una pagina web o dalla mia applicazione jquery?

Ecco la mia situazione:

Sto costruendo una webapp pesante di dati utilizzando un frontend jquery e un backend riposante che serve i dati in JSON. La pagina viene caricata una volta e poi tutto avviene tramite ajax.

L'interfaccia utente offre agli utenti un modo per creare più schede all'interno dell'interfaccia utente e ogni scheda può contenere molti e molti dati. Sto considerando di limitare il numero di schede che possono creare, ma stavo pensando che sarebbe bello limitarle solo una volta che l'utilizzo della memoria è andato oltre una certa soglia.

Sulla base delle risposte, vorrei fare alcune precisazioni:

• Sto cercando una soluzione runtime (non solo strumenti per sviluppatori), in modo che la mia applicazione possa determinare le azioni in base all'utilizzo della memoria nel browser di un utente.
• Il conteggio degli elementi DOM o delle dimensioni del documento potrebbe essere una buona stima, ma potrebbe essere piuttosto impreciso poiché non includerebbe binding di eventi, data (), plug-in e altre strutture di dati in memoria.

Aggiornamento 2015

Nel 2012 questo non era possibile, se si desiderava supportare tutti i principali browser in uso. Sfortunatamente, al momento questa è ancora una funzionalità unica di Chrome (un'estensione non standard di window.performance).

window.performance.memory

Supporto browser: Chrome 6+

Risposta del 2012

C'è un modo per scoprire quanta memoria viene utilizzata da una pagina web o dalla mia applicazione jquery? Sto cercando una soluzione runtime (non solo strumenti per sviluppatori), in modo che la mia applicazione possa determinare le azioni in base all'utilizzo della memoria nel browser di un utente.

La risposta semplice ma corretta è no . Non tutti i browser ti espongono tali dati. E penso che dovresti abbandonare l'idea semplicemente perché la complessità e l'inesattezza di una soluzione "artigianale" può introdurre più problemi di quanti ne risolva.

Il conteggio degli elementi DOM o delle dimensioni del documento potrebbe essere una buona stima, ma potrebbe essere piuttosto impreciso poiché non includerebbe binding di eventi, data (), plug-in e altre strutture di dati in memoria.

Se vuoi davvero restare fedele alla tua idea, devi separare i contenuti fissi da quelli dinamici.

Il contenuto fisso non dipende dalle azioni dell'utente (memoria utilizzata da file di script, plug-in, ecc.)
Tutto il resto è considerato dinamico e dovrebbe essere l'obiettivo principale quando si determina il limite.

Ma non esiste un modo semplice per riassumerli. Potresti implementare un sistema di tracciamento che raccolga tutte queste informazioni. Tutte le operazioni dovrebbero chiamare i metodi di tracciamento appropriati. per esempio:

Avvolgere o sovrascrivere jQuery.datail metodo di informare il monitoraggio del sistema sui tuoi allocazioni di dati.

Racchiudi le manipolazioni html in modo che venga tracciata anche l'aggiunta o la rimozione di contenuto ( innerHTML.lengthè la stima migliore).

Se mantieni oggetti in memoria di grandi dimensioni, dovrebbero essere monitorati.

Per quanto riguarda il binding di eventi, dovresti usare la delega degli eventi e quindi potrebbe anche essere considerato un fattore in qualche modo fisso.

Un altro aspetto che rende difficile stimare correttamente i requisiti di memoria è che browser diversi possono allocare la memoria in modo diverso (per oggetti Javascript ed elementi DOM).

È possibile utilizzare l' API dei tempi di navigazione .

Navigation Timing è un'API JavaScript per misurare accuratamente le prestazioni sul Web. L'API fornisce un modo semplice per ottenere statistiche temporali accurate e dettagliate, in modo nativo, per la navigazione nelle pagine e gli eventi di caricamento.

window.performance.memory dà accesso ai dati di utilizzo della memoria JavaScript.

Lettura consigliata

• Misurazione della velocità di caricamento della pagina con i tempi di navigazione

Questa domanda ha 5 anni e sia javascript che i browser si sono evoluti incredibilmente in questo periodo. Dato che questo ora è possibile (almeno in alcuni browser), e questa domanda è il primo risultato quando si utilizza Google "javascript mostra l'uso della memoria", ho pensato di offrire una soluzione moderna.

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

Questo script (che puoi eseguire in qualsiasi momento su qualsiasi pagina) mostrerà l'attuale utilizzo della memoria della pagina:

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

Non so in alcun modo che tu possa effettivamente scoprire quanta memoria viene utilizzata dal browser, ma potresti essere in grado di utilizzare un'euristica basata sul numero di elementi nella pagina. Uinsg jQuery, potresti farlo $('*').lengthe ti darà il conteggio del numero di elementi DOM. Onestamente, però, probabilmente è più facile fare solo alcuni test di usabilità e trovare un numero fisso di schede da supportare.

Utilizza lo strumento Snapshot di Chrome Heap

C'è anche uno strumento Firebug chiamato MemoryBug ma sembra non sia ancora molto maturo.

Se vuoi vedere solo per i test, c'è un modo in Chrome tramite la pagina degli sviluppatori per monitorare l'utilizzo della memoria, ma non sei sicuro di come farlo direttamente in javascript.

Vorrei suggerire una soluzione completamente diversa dalle altre risposte, vale a dire osservare la velocità della tua applicazione e una volta che scende al di sotto dei livelli definiti o mostrare suggerimenti all'utente per chiudere le schede o disabilitare l'apertura di nuove schede. Una semplice classe che fornisce questo tipo di informazioni è ad esempio https://github.com/mrdoob/stats.js . A parte questo, potrebbe non essere saggio per un'applicazione così intensiva mantenere tutte le schede in memoria in primo luogo. Ad esempio, mantenere solo lo stato utente (scorrimento) e caricare tutti i dati ogni volta che si aprono tutte le schede tranne le ultime due potrebbe essere un'opzione più sicura.

Infine, gli sviluppatori di webkit hanno discusso l'aggiunta di informazioni sulla memoria a javascript, ma hanno ottenuto una serie di argomenti su cosa e cosa non dovrebbe essere esposto. In ogni caso, non è improbabile che questo tipo di informazioni sarà disponibile in pochi anni (sebbene tali informazioni non siano troppo utili in questo momento).

Tempismo perfetto delle domande con me che inizia un progetto simile!

Non esiste un modo accurato per monitorare l'utilizzo della memoria JS in-app poiché richiederebbe privilegi di livello superiore. Come accennato nei commenti, controllare il numero di tutti gli elementi ecc. Sarebbe una perdita di tempo poiché ignora gli eventi associati ecc.

Questo sarebbe un problema di architettura se persistessero evidenti perdite di memoria o elementi inutilizzati. Assicurarsi che il contenuto delle schede chiuse venga eliminato completamente senza gestori di eventi persistenti ecc. Sarebbe perfetto; supponendo che sia fatto, potresti semplicemente simulare un utilizzo intenso in un browser ed estrapolare i risultati dal monitoraggio della memoria (digita about: memory nella barra degli indirizzi)

Suggerimento: se apri la stessa pagina in IE, FF, Safari ... e Chrome; e poi passare a about: memory in Chrome, segnalerà l'utilizzo della memoria su tutti gli altri browser. Neat!

Quello che potresti voler fare è che il server tenga traccia della loro larghezza di banda per quella sessione (quanti byte di dati sono stati inviati a loro). Quando superano il limite, invece di inviare dati tramite ajax, il server dovrebbe inviare un codice di errore che javascript utilizzerà per dire all'utente che ha utilizzato troppi dati.

Puoi ottenere il document.documentElement.innerHTML e verificarne la lunghezza. Ti darebbe il numero di byte utilizzati dalla tua pagina web.

Potrebbe non funzionare in tutti i browser. Quindi puoi racchiudere tutti gli elementi del tuo corpo in un div gigante e chiamare innerhtml su quel div. Qualcosa di simile a<body><div id="giantDiv">...</div></body>