objeto de objetos javascript

Herramienta para rastrear la pérdida de memoria de JavaScript

Question

Tengo una aplicación web que tiene una pérdida de memoria en algún lugar y no puedo detectarla. Ya probé las herramientas de desarrollo de Chrome, que normalmente funcionan bien, pero no puedo rastrear las líneas de código responsables. Las herramientas de Chrome solo me dan demasiada información y no puedo relacionar los objetos en memoria con mi código.

¿Hay alguna otra herramienta que pueda ser útil?

Answer 1

Las solicitudes de jQuery ajax fueron las mayores culpables en mi aplicación. Localice todas las funciones jQuery de ajax: .ajax (), .get (), .post () y configuradores de contenido: .html (), .text ().

Vaya a la pestaña de red en las herramientas de desarrollo, actualice la página actual de 10 a 20 veces. Si ve que las cosas se apilan con demasiada frecuencia o si no se completan las llamadas, tiene una pérdida de memoria.

Aquí hay una pérdida de memoria reciente que pude resolver con jQuery.load () ...

if(!jQuery.terms_html) $(''#tc_container'').load(STATIC_DOMAIN + ''/terms.html'', function() { jQuery.terms_html = $(''#tc_container'').html() }) else $(''#tc_container'').html(jQuery.terms_html)

Además, la última versión de jQuery en el momento de escribir esto es 3.3.1 . Tener la última versión instalada es la mejor manera de comenzar, si es posible. https://github.com/jquery/jquery/releases

Answer 2

Use los valores innerHTML y outerHTML del elemento en la vista de árbol DOM separado del Heap Profiler para asignar objetos en memoria a su código y rastrear pérdidas de memoria.

Answer 3

actualización: permite utilizar el tipo de perfil Asignaciones de almacenamiento dinámico .

1. profiler de devtools abiertos
2. hacer una acción de calentamiento
3. iniciar perfilador
4. repite la acción unas cuantas veces
5. Si la acción tiene una fuga, verá el mismo número de grupos de barras azules en el panel de vista general
6. detener el perfilador
7. Seleccione un grupo de estas barras azules en la vista general
8. mirar en la lista de objetos

Ver screencast Detección de fugas de memoria de Javascript (Chrome DevTools)

was: puede usar el siguiente escenario para eliminar las pérdidas de memoria.

1. profiler de devtools abiertos
2. hacer una acción que haga una fuga
3. tomar una instantánea de montón
4. repite los pasos 2 y 3 veces
5. seleccione la última instantánea del montón
6. cambiar el filtro "Todos los objetos" a "Objetos entre la instantánea 1 y 2"

Después de eso verá objetos un conjunto de objetos filtrados. Puede seleccionar un objeto y ver la lista de retenedores en el árbol de retención de Objeto