jQuery o javascript para encontrar el uso de memoria de la página

Question

¿Hay alguna forma de averiguar cuánta memoria está utilizando una página web o mi aplicación jquery?

Aquí está mi situación:

Estoy construyendo una aplicación web pesada de datos utilizando una interfaz de jQuery y un backend de descanso que sirve de datos en JSON. La página se carga una vez, y luego todo sucede a través de ajax.

La interfaz de usuario proporciona a los usuarios una forma de crear múltiples pestañas dentro de la interfaz de usuario, y cada pestaña puede contener una gran cantidad de datos. Estoy considerando limitar el número de pestañas que pueden crear, pero pensé que sería bueno limitarlas solo una vez que el uso de la memoria haya superado un cierto umbral.

Sobre la base de las respuestas, me gustaría hacer algunas clarfications:

• estoy en busca de una solución en tiempo de ejecución (no sólo las herramientas de desarrollo), de modo que mi aplicación puede determinar acciones basadas en el uso de memoria en el navegador de un usuario
• El recuento de los elementos DOM o el tamaño del documento puede ser una buena estimación, pero podría ser bastante inexacto, ya que no incluiría eventos vinculantes, datos(), complementos y otras estructuras de datos en memoria.

Answer 1

2015 Actualización

Ya en 2012 esto no era posible, si usted quiere apoyar a todos los principales navegadores en uso. Desafortunadamente, ahora mismo sigue siendo una función Chrome only (una extensión no estándar de window.performance).

window.performance.memory

apoyo del navegador: Chrome 6+

---

2012 respuesta

¿Hay una manera de averiguar la cantidad de memoria está siendo utilizado por una página web, o por mi aplicación jquery? Estoy buscando una solución de tiempo de ejecución (no solo herramientas de desarrollador), para que mi aplicación pueda determinar acciones basadas en el uso de memoria en el navegador de un usuario.

La respuesta simple pero correcta es no. No todos los navegadores le exponen dichos datos. Y creo que debería abandonar la idea simplemente porque la complejidad e inexactitud de una solución "hecha a mano" puede presentar más problemas de los que resuelve.

elementos de recuento DOM o el tamaño del documento podría ser una buena estimación, pero podría ser bastante inexacta, ya que no incluiría la unión caso, los datos(), plugins y otras estructuras de datos en la memoria para.

Si realmente quiere seguir con su idea, debe separar el contenido fijo y dinámico.

El contenido fijo no depende de las acciones del usuario (memoria utilizada por archivos de comandos, complementos, etc.)
Todo lo demás se considera dinámico y debe ser su enfoque principal al determinar su límite.

Pero no hay una manera fácil de resumirlos. Puede implementar un sistema de seguimiento que reúna toda esta información. Todas las operaciones deben llamar a los métodos de seguimiento apropiados. por ejemplo:

Ajustar o sobrescribir jQuery.data método para informar al sistema de seguimiento acerca de las asignaciones de datos.

Envuelva las manipulaciones html para que también se rastree la adición o eliminación de contenido (innerHTML.length es la mejor estimación).

Si mantiene grandes objetos en la memoria, también deberían ser monitoreados.

En cuanto a la vinculación de eventos, debe usar la delegación de eventos y luego también podría considerarse un factor algo fijo.

Otro aspecto que hace que sea difícil estimar correctamente los requisitos de memoria es que diferentes navegadores pueden asignar memoria de forma diferente (para objetos Javascript y elementos DOM).

Answer 2

No conozco ninguna forma de saber realmente la cantidad de memoria que está utilizando el navegador, pero es posible que pueda utilizar una heurística basada en el número de elementos de la página. Uinsg jQuery, podría hacer $('*').length y le dará la cuenta de la cantidad de elementos DOM. Honestamente, sin embargo, probablemente sea más fácil hacer algunas pruebas de usabilidad y obtener una cantidad fija de pestañas para apoyar.

Answer 3

Si desea ver solo para probar, hay una forma en Chrome a través de la página del desarrollador para rastrear el uso de la memoria, pero no está seguro de cómo hacerlo en javascript directamente.

Answer 4

Lo que podría querer hacer es hacer que el servidor realice un seguimiento de su ancho de banda para esa sesión (cuántos bytes de datos se han enviado a ellos). Cuando sobrepasan el límite, en lugar de enviar datos a través de ajax, el servidor debe enviar un código de error que JavaScript usará para decirle al usuario que ha usado demasiados datos.

Answer 5

Puede obtener document.documentElement.innerHTML y verificar su longitud. Le daría la cantidad de bytes utilizados por su página web.

Esto puede no funcionar en todos los navegadores. Entonces puedes encerrar todos los elementos de tu cuerpo en un div gigante y llamar a innerhtml en ese div. Algo así como <body><div id="giantDiv">...</div></body>

Answer 6

Uso del Chrome Heap Snapshot tool

Hay también una herramienta Firebug llamada MemoryBug pero parece que aún no está muy maduro.

Answer 7

Puede usar el Navigation Timing API.

Navigation Timing es una API de JavaScript para medir con precisión el rendimiento en la web. La API proporciona una forma simple de obtener estadísticas de tiempo precisas y detalladas, de forma nativa, para la navegación de la página y eventos de carga.

window.performance.memory da acceso a los datos de uso de memoria de JavaScript.

lecturas recomendadas

• Measuring page load speed with Navigation Timing

Answer 8

momento perfecto pregunta conmigo comenzando en un proyecto similar!

No existe una forma precisa de controlar el uso de la memoria JS en la aplicación, ya que requeriría privilegios de nivel superior. Como se mencionó en los comentarios, verificar el número de todos los elementos, etc. sería una pérdida de tiempo ya que ignora los eventos enlazados, etc.

Esto sería un problema de arquitectura si la memoria pierde elementos manifiestos o no utilizados persisten. Asegurarse de que el contenido de las pestañas cerradas se elimine por completo sin que persistan los controladores de eventos, etc. sería perfecto; suponiendo que se hace sólo podría simular un uso intensivo en un navegador y extrapolar los resultados de monitoreo de memoria (tipo sobre: ​​memoria en la barra de direcciones)

Protip: si se abre la misma página en IE, FF, Safari ... y Chrome; y que navegue al sobre: ​​memoria en Chrome, informará sobre el uso de memoria en todos los otros navegadores. ¡Ordenado!

Answer 9

Me gustaría sugerir una solución completamente diferente de las otras respuestas, es decir, observar la velocidad de su aplicación y una vez que cae por debajo de los niveles definidos, mostrar consejos al usuario para cerrar pestañas o desactivar nuevas pestañas para abrir. Una clase simple que proporciona este tipo de información es, por ejemplo, https://github.com/mrdoob/stats.js. Aparte de eso, puede que no sea prudente que una aplicación tan intensa mantenga todas las pestañas en la memoria en primer lugar. P.ej. mantener solo el estado del usuario (desplazamiento) y cargar todos los datos cada vez que se abren todas las pestañas menos las dos últimas podría ser una opción más segura.

Por último, los desarrolladores de webkit han estado discutiendo la posibilidad de agregar información de memoria a javascript, pero han recibido una serie de argumentos sobre qué y qué no deberían exponerse. De cualquier manera, no es improbable que este tipo de información esté disponible en unos pocos años (aunque esa información no es muy útil en este momento).

Answer 10

Esta pregunta tiene 5 años de antigüedad, y tanto los navegadores como los navegadores han evolucionado increíblemente en este momento. Dado que esto ahora es posible (al menos en algunos navegadores), y esta pregunta es el primer resultado cuando Google "javascript muestra el uso de la memoria", pensé que ofrecería una solución moderna.

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

Este script (que se puede ejecutar en cualquier momento en cualquier página) mostrará el useage de memoria actual de la página:

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