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

98

¿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.
javascript jquery memory memory-management Tauren
fuente
Debe investigar el tipo de usuarios de su aplicación web para determinar si tienen o no problemas de memoria mientras usan su aplicación web. ¿O tiene problemas de memoria / rendimiento con su aplicación web?
Prutswonder
@Prutswonder: No, no estoy teniendo problemas, pero solo tenía curiosidad por saber si existe una herramienta de este tipo. Solo pensé que, en lugar de simplemente establecer un límite fijo en las pestañas, un método dinámico podría ser genial.
Tauren
Acabo de agregar algunos detalles adicionales a la pregunta para ayudar a aclarar que estoy buscando una solución en tiempo de ejecución, no una solución en tiempo de compilación.
Tauren
2
Solo una pregunta, si algo ya estaba en caché, ¿seguirá contando?
ajax333221

Respuestas:

65

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

gblazex
fuente
¿No se innerHTML.lengthnecesita memoria, RAM o CPU (o cualquier otra cosa, no tengo idea) para procesar también?
mrReiha,
El soporte del navegador para esta función NO es IE9 + ni nada más que Chrome. Window.performance.memory es solo para Chrome. docs.webplatform.org/wiki/apis/timing/properties/memory
Blunderfest
Tienes razón, pensé que la memoria era parte del estándar de sincronización de navegación y el window.performanceobjeto. Las antiguas entradas "respaldado por" eran aplicables para esa norma. Chrome la window.performance.memoryconsidera una extensión no estándar .
gblazex
Para habilitar la supervisión de la memoria en tiempo real a través de window.performance.memory, debe iniciar Chrome con el indicador --enable-exact-memory-info.
kluverua
Actualización: Opera también admite esto. Fuente: Mozilla. developer.mozilla.org/en-US/docs/Web/API/…
HoldOffHunger
39

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

Sindre Sorhus
fuente
Gran sugerencia. Gracias.
MaximOrlovsky
21

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

Dustin Brownell
fuente
1
Esto parece estar informando el uso de la memoria JS y no el uso de la memoria de la página, el Administrador de tareas integrado de Chrome dice que Gmail está usando 250 MB, mientras que memory-stats.js informa 33,7 MB
Brandito
No hay una licencia listada para la página de github de bookmarklet.js, por lo que presumiblemente es propiedad intelectual con derechos de autor. Eso deja cierto grado de incertidumbre al depender de ese proyecto.
HoldOffHunger
8

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.

tvanfosson
fuente
3
@tvanfosson: no es una mala idea, pero esto no me va a dar información sobre la memoria que no es DOM, como .data () y en las estructuras de datos de la memoria. Pero podría dar una buena estimación del peso total que podría usar.
Tauren
4

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.

Pablo fernandez
fuente
@Pablo: Gracias. Sin duda usaré herramientas de desarrollo, pero esperaba encontrar algo que pudiera usar durante el tiempo de ejecución para encontrar el uso de memoria en el navegador de cada usuario.
Tauren
3

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.

Zachary K
fuente
@Zachary: Gracias. Sin duda usaré herramientas de desarrollo, pero esperaba encontrar una solución de análisis en tiempo de ejecución.
Tauren
1
Si encuentra uno, hágamelo saber, me encantaría tener uno a mano
Zachary K
3

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

David Mulder
fuente
1

¡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!

ov
fuente
0

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.

Leva
fuente
@incrediman: esa es una idea genial también, pero no creo que funcione sin incorporar muchas funciones de seguimiento, solo un recuento de bytes no funcionaría. El problema es que los datos en una pestaña son una lista que el usuario filtrará y ordenará de muchas formas diferentes. Cada vez que realizan cambios, se recuperarán nuevos datos del servidor y reemplazarán los elementos dom actuales. Además, ¿qué dicen que no presionan "recargar" y comienzan con una página nueva? Tendría que rastrear 304s y cosas así también, pero tengo la intención de servir solo html estático, todos los datos provienen de un servicio REST.
Tauren
Este enfoque no tiene en cuenta los elementos creados o destruidos con createElement () o remove (), lo que afectaría el uso de la memoria del cliente. Pero es curiosamente diferente de otras respuestas (al medir el lado del servidor, y no el lado del cliente, sus medidas no cambian la memoria, como lo harían otras respuestas).
HoldOffHunger
0

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>

Midhat
fuente
4
innerHTMLEs poco probable que la longitud de la cadena generada se corrobore de manera útil con la memoria que utiliza el navegador (por ejemplo, en su modelo de objeto interno) para representar ese HTML.
TJ Crowder
¿Y por qué es eso? Mi razón fundamental es que si se carga algún texto en el navegador, debe almacenarse en la memoria. Por lo tanto, proporciona una medida de la memoria utilizada por el navegador para representar la página.
Midhat
4
Piensa en ello de esta manera. Si dices "Me gustaría darte 10 millones de dólares", son 8 palabras. Por otro lado, si dijiste "Me gustaría estornudar en tu servilleta", eso es 7. ¿Es el primero solo 8/7 más valioso que el segundo?
intuido el
1
Esto es similar a la sugerencia de @tvanfosson de obtener el recuento de elementos DOM. El suyo es probablemente un poco más preciso porque diferentes elementos dom pueden contener diferentes cantidades de texto. Pero todavía no obtiene ninguna información sobre datos (), controladores de clic, estructuras de datos de memoria y objetos, etc. Mi aplicación utiliza muchas de estas funciones.
Tauren
1
Puede haber variables JS en el alcance que apunten a nodos DOM separados, que no serán parte del elemento del documento. También puede escribir código para cargar una cadena muy larga en una variable, consumiendo gigabytes de memoria, sin afectar el texto de la página.
Josh Ribakoff