google-chrome - tab - developer tools google
Chrome DevTools Timeline Update Layer Tree Event (1)
Primero tienes que entender qué es una Render Layer . La Render Layer representación es la representación de los navegadores sobre cómo representar ese nodo y cómo se relaciona con otros nodos con el mismo espacio de coordenadas para tratar cosas como la superposición de contenido, la pintura, etc. El Update Layer Tree podría estar sucediendo desde una serie de cosas diferentes. Por ejemplo, si usa javascript para establecer un estilo en un elemento, el Layer Tree deberá calcularse y actualizarse. O tal vez tiene que sincronizar el Layer Tree entre el hilo de los compositores (donde las texturas se cargan en la GPU) y el hilo principal (donde se ejecuta el javascript).
En su caso, supongo que está activando una invalidación de capa fundamental que lo está obligando a actualizar una capa en lo alto de la jerarquía de árbol, que luego se está filtrando por el árbol y haciendo que cada una de esas capas se actualice. Aunque es difícil de decir sin mirar su código.
De cualquier manera, si este Update Layer Tree largo está sucediendo constantemente antes de que se Layout calcular el Layout , sin duda está relacionado con eso.
Aquí hay algunos recursos para que comiences.
Lea este artículo de HTML5 Rocks sobre las capas de los navegadores. Representación acelerada en Chrome
o este otro artículo de HTML5 Rocks sobre composición. Animaciones de alto rendimiento
Y si desea una comprensión profunda de cómo Chrome representa una página y utiliza la GPU en ese proceso. Hay un gran artículo sobre el blog de Chromium al respecto. GPU Accelerated Compositing en Chrome
Buena suerte.
Estoy construyendo animación / transición de aplicaciones web pesadas con mucho contenido. Hay muchas capas de composición en la aplicación, ya que todo se mueve / anima usando transformaciones css. Estoy intentando depurar la aplicación para descubrir cuellos de botella en la representación y he notado muchos eventos "Actualizar árbol de capas" en Chrome DevTools -> Línea de tiempo -> Modo de marcos como:
¿Alguien tiene una idea de lo que podría estar causando esto? ¿Qué significa "Actualizar árbol de capas"?