Estoy usando el chrome dev tools para ver si hay una pérdida de memoria en algunas código JS. El de memoria de línea de tiempo se ve bien con la memoria del ser reclamado como se esperaba.

Encontrar JS pérdida de memoria en chrome dev tools

Sin embargo, la memoria instantánea es confuso porque parece como que hay una pérdida porque hay entradas en «Chalet Árbol DOM».

Es de las cosas bajo «independiente de Árbol DOM» a la espera de ser recolector de basura o son las pérdidas reales?

También, ¿alguien sabe cómo averiguar cuál es la función se mantiene en una referencia a un elemento separado?

Encontrar JS pérdida de memoria en chrome dev tools

  • He encontrado que las cosas en el «Chalet Árbol DOM» eran fragmentos de documento en caché por jQuery para mejorar el rendimiento
InformationsquelleAutor Carl Rippon | 2012-08-13

3 Comentarios

  1. 33

    Esos elementos se hace referencia en el código, pero están desconectados de la página principal del árbol DOM.

    Ejemplo sencillo:

    var a = document.createElement("div");

    a hace referencia a un elemento desconectado ahora, no se puede GC d cuando a es todavía en el ámbito.

    Si el desprendimiento de dom árboles persisten en la memoria, a continuación, desea mantener las referencias a ellos. Es algo fácil con jQuery para hacer esto,
    solo tienes que guardar una referencia a un recorrido resultado y mantener su alrededor. Por ejemplo:

    var parents = $("span").parent("div");
    $("span").remove();

    Ahora las luces se hace referencia a pesar de que no aparecen se hace referencia a ellos de todos modos. parents indirectamente mantiene referencias
    a todas las luces a través de jQuery .prevObject de la propiedad. Así que haciendo parents.prevObject daría el objeto que hace referencia a todas las luces.

    Ver ejemplo aquí http://jsfiddle.net/C5xCR/6/. Aunque directamente no aparecen que las vinculaciones haría referencia,
    de hecho, son la que hace referencia el parents variable global y se puede ver el 1000 se extiende en el Desprendimiento de árbol DOM nunca va a desaparecer.

    Ahora aquí está la misma jsfiddle pero con:

    delete parents.prevObject

    Y usted puede ver las luces no están en la comisión de árbol dom, o en cualquier lugar para esa materia. http://jsfiddle.net/C5xCR/7/

    • +1 por mencionar a las variables globales, no pensar en ellos, pero que podría muy bien ser la causa de muchos separado DOM referencias
    • no necesariamente tiene que ser global, algo que es persistentemente mantenido alrededor de un cierre u objeto de propiedad o cualquier cosa. Mi idea principal era que no es inmediatamente obvio cómo atravesado jQuery mantiene todas las referencias antiguas en la memoria siempre y cuando el último recorrido objeto jQuery es en la memoria. api.jquery.com/category/traversing/tree-traversal
    • El pensamiento acerca de mencionar que, demasiado (de ahí mi sugerencia para quitar el elemento que pone en marcha mediante la recuperación de los DOM de referencia desde el objeto jQuery). Yo no ir tan lejos como para mencionar el código como (function globalFunc (elem){return elem.value;})(document.getElementById('foo')); porque he recibido un montón de comentarios en los que se demasiado exagerado o algo, pero he ligado a una pregunta sobre los cierres y las Mem-fugas en lugar
  2. 14

    Es de las cosas bajo «independiente de Árbol DOM» a la espera de ser recolector de basura o son las pérdidas reales?

    Antes de tomar una instantánea del navegador se ejecuta la recolección de basura y barrido de todos los objetos que no se hace referencia. Así que el montón de instantáneas siempre contienen sólo los objetos. Como consecuencia, si un Desprendimiento de Árbol DOM es en la foto que no debe ser un elemento en el árbol que se hace referencia de JavaScript.

    También, ¿alguien sabe cómo averiguar cuál es la función se mantiene en una referencia a un elemento separado?

    No debe ser un elemento(o varios de ellos) en el mismo desprendimiento de árbol DOM que tiene el fondo amarillo. Tales elementos se hace referencia desde el código JavaScript. Usted puede averiguar exactamente quién mantiene la referencia al elemento en el retenedores árbol.

    • La segunda parte de su respuesta fue muy útil. Gracias. ¿Sabe qué es el fondo rojo significa?
    • Los rojos son los nodos DOM que se conservan exclusivamente por el árbol DOM y no hay referencias directas a ellos desde el código javascript. Esto significa en particular que es imposible que todos los elementos de un desprendimiento de árbol dom son de color rojo como el árbol se recogen en ese caso. Siempre hay al menos un nodo, ya sea con un color amarillo o blanco de fondo.
    • hay una manera fácil de encontrar el fondo de color amarillo? ¿
    • Gracias nadie estaba explicando lo que el rojo significa. Ahora que usted lo dice mi memleak tiene un patrón 🙂
  3. 1

    Puesto que ya has agregado la etiqueta jQuery, tenía un truco sospechas de ser esta una de jQuery cosa. Una rápida en google me llevó a esta página. Cuando se utiliza jQ del detach método, una referencia al objeto que se mantiene todavía en la memoria, por lo que podría ser la causa de su instantánea.

    Otra cosa podría ser que jQuery tiene un div nodo a la mano, que es -obviamente – que se mantiene en memoria, pero nunca se agregó a la real dom… una especie de document.createNode('div') sin agregarla. Esto, también, se mostrará en la memoria instantánea. Usted no puede conseguir alrededor de esto, jQuery utiliza para analizar las cadenas en los elementos html.

    Para eliminar algunos de los elementos de la memoria, uso de jQuery .remove() método, y su mem se borran al instante.cf Esailija el comentario sobre por qué remove no encaja en el proyecto de ley aquí.
    $('#someElem')[0].parentNode.removeChild($('#someElem')[0]); Debe eliminar el elemento del todo, pero no podría separar los eventos. Tal vez algo a lo largo de las líneas de:

    $('#someElem').detach();//to remove any event listeners
    $('#someElem')[0].parentNode.removeChild($('#someElem')[0]);//remove element all together

    Y, de nuevo, como Esailija señaló en su respuesta, asegúrese de asignar las referencias a cualquier objeto jQuery (var someRef= $('.someSelector');) a una variable global, ya que no será GC ed. Sólo evitar globales, todos juntos, de hecho.

    Pero para responder a tu pregunta brevemente, y claramente: no se que estos no son real pérdidas de memoria, la memoria debe ser liberado en el onbeforeunload evento. El objeto jQuery es eliminado, por lo que todas las referencias que salen de su ámbito. Al menos, eso es lo Que mi «investigación» me llevan a creer. Tal vez no muy relevante, pero sólo como referencia Aquí es una cuestión sobre la mem-filtraciones que he publicado hace un rato, y con un par de cosas que me enteré..

    • jQuery .remove() no es diferente de .detach() con respecto a este. La diferencia es que .remove() borra los datos de jQuery.cache (que no hace referencia a cualquier elemento a menos que sea por código de usuario) para los elementos.
    • Gracias, ha sido un tiempo desde que he usado jQuery. Yo basa en que parte de mi respuesta en el artículo que he enlazado demasiado
    • Tenga en cuenta que los dom métodos de eliminación (.removeChild etc, jQuery's .remove, .detach etc) sólo desconecte el elemento del dom. Esto significa eliminar algunas referencias para él porque su árbol dom hermanos, padres y dicha referencia ya no a ella, pero no significa que todas las referencias se borran. Por ejemplo, cualquier elemento en el documento es global porque, por ejemplo, window.document.body.firstChild.nextSibling.nextSibling.firstChild es una referencia directa a él. La eliminación de las principales árbol dom sólo elimina estas referencias, pero no necesariamente todos.
    • Cierto, pero en este contexto debería ser suficiente. Ambos hemos señalado que él debería asegurarse de que el todo se hace referencia a las variables son elegibles para la Recolección de Basura, insinuado en los riesgos de cierres en los que el respeto etc…
    • Los elementos que no están en los principales árbol DOM es un hecho aquí, porque se muestra en la Detached DOM treede la categoría. Así que mi punto es que cualquier dom método de eliminación es ineficaz, porque aquí no están conectados a empezar.
    • Veo que estás llegando desde, pero que casi no se dan aquí, de la OMI. Las capturas de pantalla que muestran una memoria instantánea – No hay manera de saber qué código se ha ejecutado, lo que los controladores de eventos han sido llamados, etc… ya que el op es la comprobación de su código, es muy probable que no sea una instantánea de un estado limpio, recién cargado la página. De todos modos, incluso si se tratara: jQuery hace mantener un desprendimiento de div en su funcionamiento interno, que siempre se muestran como un desprendimiento de nodo, nada de lo que el OP puede hacer acerca de eso
    • Quiero decir, esta pregunta está preocupado por Separado DOM árboles. Así que es un hecho que estos elementos no están en el árbol dom, por lo que llamar a quitar o algo similar en ellos no podrán hacer nada. Y jQuery hace mantener fragmento de documento de caché de alrededor, que se ve como es el «problema» aquí.
    • Mira, entiendo tu punto, y sí, la DOM de almacenamiento en caché es muy probable que (parte de) el tema en cuestión. Mi punto era que, quizás, algunas de las OP del código creado (global) referencias a ciertos elementos, sólo para eliminarlos más abajo en el código, caso en el que también podría mostrar como desprendimiento de elementos. Junto a los chalets div jQuery se basa en. El OP quería saber si esta es una mem-la fuga – a las que la respuesta es: no, realmente no, es la fuga hasta que la página se descarga o se actualiza. El clima es el almacenamiento en caché o asignado referencias que sobrevivir a el elemento

Dejar respuesta

Please enter your comment!
Please enter your name here