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

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

Esta es mi situación:

Estoy construyendo una aplicación web con muchos datos usando un frontend jquery y un backend tranquilo que sirve 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 varias pestañas dentro de la interfaz de usuario, y cada pestaña puede contener una gran cantidad de datos. Estoy considerando limitar la cantidad 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.

Basándome en las respuestas, me gustaría hacer algunas aclaraciones:

• Estoy buscando una solución en 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.
• Contar 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 el enlace de eventos, datos (), complementos y otras estructuras de datos en memoria.

Actualización 2015

En 2012, esto no era posible si deseaba admitir todos los principales navegadores en uso. Desafortunadamente, en este momento esta sigue siendo una función exclusiva de Chrome (una extensión no estándar de window.performance).

window.performance.memory

Compatibilidad con el navegador: Chrome 6+

2012 respuesta

¿Hay alguna forma de averiguar cuánta memoria está siendo utilizada por una página web o por mi aplicación jquery? Estoy buscando una solución en 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 y la inexactitud de una solución "hecha a mano" pueden introducir más problemas de los que resuelve.

Contar 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 el enlace de eventos, datos (), complementos y otras estructuras de datos en memoria.

Si realmente desea 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 script, 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. Podría implementar un sistema de seguimiento que recopile toda esta información. Todas las operaciones deben llamar a los métodos de seguimiento adecuados. p.ej:

Envuelva o sobrescriba el jQuery.datamétodo para informar al sistema de seguimiento sobre sus asignaciones de datos.

Envuelva las manipulaciones html para que también se realice un seguimiento de la adición o eliminación de contenido ( innerHTML.lengthes la mejor estimación).

Si mantiene grandes objetos en memoria, también deben supervisarse.

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 dificulta la estimación correcta de los requisitos de memoria es que diferentes navegadores pueden asignar memoria de manera diferente (para objetos Javascript y elementos DOM).

Puede utilizar la API de sincronización de navegación .

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

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

Lectura recomendada

• Medición de la velocidad de carga de la página con sincronización de navegación

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

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

Este script (que puede ejecutar en cualquier momento en cualquier página) mostrará el uso 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);

No conozco ninguna forma de saber cuánta memoria utiliza el navegador, pero es posible que pueda utilizar una heurística basada en la cantidad de elementos de la página. Uinsg jQuery, podría hacerlo $('*').lengthy le dará el recuento de la cantidad de elementos DOM. Honestamente, sin embargo, probablemente sea más fácil hacer algunas pruebas de usabilidad y crear una cantidad fija de pestañas para admitir.

Usar la herramienta Instantánea de Chrome Heap

También hay una herramienta Firebug llamada MemoryBug, pero parece que aún no está muy madura.

Si solo desea ver 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 estoy seguro de cómo hacerlo en javascript directamente.

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 deshabilitar la apertura de nuevas pestañas. 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 aconsejable que una aplicación tan intensiva mantenga todas las pestañas en la memoria en primer lugar. Por ejemplo, mantener solo el estado de usuario (desplazamiento) y cargar todos los datos cada vez que se abren todas las pestañas, excepto las dos últimas, podría ser una opción más segura.

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

¡Momento perfecto para las preguntas para comenzar con un proyecto similar!

No existe una forma precisa de monitorear 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 vinculados, etc.

Esto sería un problema de arquitectura si se manifiestan pérdidas de memoria o persisten elementos no utilizados. Sería perfecto asegurarse de que el contenido de las pestañas cerradas se elimine por completo sin controladores de eventos persistentes, etc. suponiendo que esté hecho, podría simular un uso intensivo en un navegador y extrapolar los resultados del monitoreo de la memoria (escriba about: memory en la barra de direcciones)

Sugerencia: si abre la misma página en IE, FF, Safari ... y Chrome; y luego navegar a about: memory en Chrome, informará el uso de memoria en todos los demás navegadores. ¡Ordenado!

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

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

Es posible que esto no funcione en todos los navegadores. Así que puedes incluir todos los elementos de tu cuerpo en un div gigante y llamar a innerhtml en ese div. Algo como<body><div id="giantDiv">...</div></body>