Me he dado cuenta de que la memoria del navegador comienza a aumentar, mientras que yo estoy en un formulario (esto se nota desde el administrador de tareas). En IE 9, esto va fácilmente a través de 500MB después de algún uso, mientras que chrome es más resistente (va a 200MB utilizando la misma prueba).

Estoy usando las herramientas para desarrolladores de chrome para depurar este problema. He notado que hay un gran número de Desprendimiento de árbol DOM:

Javascript pérdidas de Memoria: Desprendimiento de árbol DOM

Estoy asumiendo que esto puede confirmar que hay una pérdida de memoria. Sería correcto?
En segundo lugar, yo tendría que saber cómo identificar la causa raíz del problema. Yo sé que usted debe utilizar la retención árbol para identificar lo que está deteniendo los elementos de ser reclamado. Pero no puedo averiguar cómo utilizar la retención árbol. Por ejemplo, ¿qué hace la retención árbol en la imagen de arriba significa por favor?

Cualquier ayuda sería muy apreciada.

  • Podrían aclarar memory of the browser starts increasing whilst I am in a form con algún código? Que ayuda a encontrar la pérdida de memoria.
  • ¿esta otra pregunta/respuesta ayudar?

2 Comentarios

  1. 26

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

    una. Dentro de sus funciones locales siempre es clara la referencia

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

    b. Nunca almacenar referencias como parte del elemento de datos .data()

    c. Trate de no usar DOM referencias dentro de cierres/en línea controladores, 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 la búsqueda de elementos que pueden ralentizar la página hacia abajo, pero el retraso es mínimo cuando se compara con el impacto en el rendimiento de un enorme montón de causas esp. en gran solo de la página de aplicaciones. Por lo tanto, #3 debe ser utilizado sólo después de sopesar los pros y los contras. (Lo hizo de gran ayuda en mi caso)

    ACTUALIZACIÓN

    d. Evite las funciones anónimas Nomenclatura de sus controladores de eventos y locales de las funciones le ayudará mucho, mientras que los perfiles/ver las instantáneas del montón.

    • Yo tendría que estar en desacuerdo con (c), la única vez que esto podría causar un problema de la omi sería si la posterior llamada a la función devuelve un cierre, o realizar una operación en la que se conserva una referencia a la aprobada en el elemento de dom (o jQuery envuelto elemento) — es decir, como almacenar el elemento en una lista estática, o la creación de algún tipo de referencia circular. ¿Tiene usted un ejemplo de donde simplemente pasar de un elemento a un método podría causar un problema?
    • comprobado con mi código. Estás en lo correcto. Me refería a los cierres y no simplemente les pasa a los métodos. Se ha corregido el ejemplo de arriba.
    • Ah, bueno. Gracias por la aclaración, mucho más clara ahora.
    • Su último ejemplo – no utilizar variables de fuera de alcance – ¿por qué no? No es que el punto entero de la utilización de un cierre?
    • Usted puede seguir adelante y utilizar si no te importa que usted está pasando referencias a objetos DOM! No es mucho de un problema en el caso de los valores primitivos y objetos.
    • supongamos que usted necesita para buscar el identificador dentro de un elemento específico, como $('#someDiv', targetEl). Supongamos targetEl es un argumento de myFunc que hace referencia a un elemento de DOM, el identificador para que no se conoce dentro de la myFunc cuerpo. ¿Cómo le recomendamos mantener la referencia de DOM?
    • No estoy de acuerdo con estos consejos. (a) es innecesario, siempre que el ámbito es el de la izquierda (por ejemplo, cuando usted está dejando una función local), mientras que no hay resto de las referencias a la referencia, será limpiado. (b) está muy bien que hacer si eres responsable con la cantidad de referencias que usted está almacenando; no importa donde almacenarlos. (c) la misma cosa. Acaba de ser responsable con la cantidad de referencias de la tienda. El uso de variables desde un ámbito superior está muy bien y puede tener mejoras de rendimiento. El mayor problema es que es probable la creación de elementos y separarlas en lugar de la realidad, la eliminación de ellos.
    • Cuenta también cualquier Evento a los oyentes que están conectados al elemento DOM y no se quita cuando el elemento DOM que se separa
    • pregunta rápida en el ejemplo c, su ejemplo tiene sentido, pero no se que sugieren que lo ideal es que no se hace referencia a la variable el para agregar el controlador de clic?
    • Gracias por señalándolo. Se han corregido mi fragmento de código.

  2. 2

    Ve como su código crea muchos DOM subárboles y mantiene referencias a ella desde javascript. Usted necesita para seleccionar un elemento de un Desprendimiento de árbol dom. De acuerdo a la instantánea que usted debe seleccionar un elemento de Texto. Y mirar en los retenes de árbol.

    Este árbol muestra todas las rutas que mantiene el objeto en vivo. Al menos una ruta de acceso, generalmente el más corto, que le llevará a la ventana de objetos. Si usted familiarizado con el código, entonces usted puede encontrar fácilmente el objeto de que la ruta que ha de ser eliminado, pero no. Puede haber muchos objetos en el camino. El objeto con la distancia más pequeña es más interesante.

Dejar respuesta

Please enter your comment!
Please enter your name here