google-chrome - tag - <meta name="theme-color" content="#db5945">

¿Qué significa fondo amarillo en el título del objeto en el generador de perfiles de Chrome?

Question

Estoy tratando de entender el perfilador de montón en las herramientas para desarrolladores de Chrome. Veo varios objetos alcanzables en la instantánea, algunos de ellos tienen fondo amarillo y otros no. Qué significa eso? ¿Cual es la diferencia?

La leyenda del color no es exactamente útil en este caso, ya que tiene un fondo amarillo en sí mismo (wtf).

Answer 1

Ok, resulta que el fondo amarillo significa que el objeto que lo tiene tiene un identificador de JavaScript, o dicho de otro modo, es accesible desde JavaScript, mientras que el objeto sin fondo (o blanco) no se puede acceder desde JavaScript, pero aún se puede acceder desde la raíz del gráfico.

Sin embargo, el más interesante parece ser un objeto con fondo rojo. El fondo rojo significa que el objeto que lo tiene es parte del árbol DOM independiente. Por lo tanto, es básicamente un elemento DOM que no es accesible desde el nodo raíz, pero es referenciado por otro objeto que, a su vez, es accesible desde JavaScript (tiene fondo amarillo).

Breve cita de la gran reseña de Addy Osmani:

P: Observé una cantidad de nodos DOM en la instantánea del montón, donde algunos se resaltan en rojo y se indican como un "árbol DOM independiente", mientras que otros son amarillos. ¿Qué significa esto?

Notarás nodos de algunos colores diferentes. Los nodos rojos no tienen referencias directas a JavaScript de ellos, pero están vivos porque son parte de un árbol DOM independiente. Puede haber un nodo en el árbol al que se hace referencia desde JavaScript (tal vez como un cierre o una variable) pero, por coincidencia, impide que todo el árbol DOM se recolecte como basura.

Los nodos amarillos, sin embargo, tienen referencias directas a JavaScript. Busque nodos amarillos en el mismo árbol de DOM separado para localizar referencias de su JavaScript. Debe haber una cadena de propiedades que va desde la ventana DOM al elemento (por ejemplo, window.foo.bar [2] .baz ).