tablas - Fugas de memoria Javascript: Árbol DOM independiente

obtener datos de una tabla html javascript

Question

Me he dado cuenta de que la memoria del navegador comienza a aumentar mientras estoy en un formulario (esto es notable desde el administrador de tareas). En IE 9, esto supera fácilmente los 500 MB después de cierto uso, mientras que Chrome es más resistente (va a 200 MB con la misma prueba).

Estoy usando las herramientas de desarrollo de Chrome para depurar este problema. Me he dado cuenta de que hay una gran cantidad de árboles DOM separados:

Estoy asumiendo que esto puede confirmar que hay una pérdida de memoria. ¿Sería eso correcto? En segundo lugar, necesitaría averiguar cómo identificar la causa raíz del problema. Sé que debe usar el árbol de retención para identificar qué impide que se reclamen esos elementos. Pero no puedo averiguar cómo usar el árbol de retención. Por ejemplo, ¿qué significa el árbol de retención en la captura de pantalla anterior por favor?

Cualquier ayuda sería apreciada grandemente

Answer 1

Hay muchas consideraciones que se deben tener en cuenta al escribir código que hace referencia a elementos DOM. Pero todo se reduce básicamente a un par de puntos simples:

a. Dentro de tus funciones locales siempre borra la referencia.

var menu = $(''body #menu'');
// do something with menu
.
.
.
menu = null;

segundo. Nunca almacene referencias como parte de datos de datos .data()

do. Trate de no usar referencias de DOM dentro de cierres / controladores en línea, en lugar de pasar identificadores

 function attachClick(){
var someDiv = $(''#someDiv'');
someDiv.click(function(){
var a = someDiv....;
//Wrong. Instead of doing this..
});
someDiv.click(function(){
var a = $(''#someDiv'');
//Pass the identifier/selector and then use it to find the element
});
var myFunc = function(){
var a = someDiv;
//using a variable from outside scope here - big DON''T!
}
}

Sí, se puede argumentar que los elementos de búsqueda pueden ralentizar la página, pero el retraso es muy mínimo en comparación con el impacto de un gran montón de causas, especialmente. En grandes aplicaciones de una sola página. Por lo tanto, el # 3 debe usarse solo después de sopesar los pros y los contras. (Me ayudó significativamente en mi caso)

ACTUALIZAR

re. Evite las funciones anónimas: nombrar sus controladores de eventos y funciones locales le ayudará mucho a la hora de perfilar / mirar instantáneas de pila.

Answer 2

Parece que su código crea muchos subárboles de DOM y mantiene referencias a él desde javascript. Es necesario seleccionar un elemento de un árbol de dominación separado. De acuerdo con la instantánea, debe seleccionar Elemento de texto. Y mira en el árbol de los retenedores.

Este árbol te muestra todos los caminos que mantienen vivo el objeto. Al menos una ruta, generalmente la más corta, lo llevará al objeto de la ventana. Si está familiarizado con el código, puede encontrar fácilmente el objeto en esa ruta que debe eliminarse pero no lo hace. Puede haber muchos de tales objetos en el camino. El objeto con la distancia más pequeña es más interesante.