tab - google chrome performance tools
¿Qué está causando este ciclo excesivo de "Capas compuestas", "Recalcular estilo" y "Actualizar árbol de capas"? (3)
Estoy muy intrigado por el número excesivo de "capas compuestas", "recalcular el estilo" y luego "actualizar el árbol de capas" en una de nuestras aplicaciones web. Me pregunto qué los está causando aquí.
Si apunta su Chrome a uno de nuestros flujos en movimiento rápido, diga https://choir.io/player/beachmonks/github , y encienda su "medidor de FPS", puede ver que la aplicación puede alcanzar aproximadamente 60 fps la mayoría de los veces cuando estamos en la cima.
Sin embargo, tan pronto como me desplazo unos cuantos mensajes y dejo la pantalla como está, la velocidad de FPS se reduce drásticamente a alrededor de 10 o incluso más. Lo que el código está haciendo aquí es que procesa cada mensaje entrante, lo coloca en la parte superior y desplaza la lista hacia arriba Npx, que es la altura del mensaje nuevo, para mantener la posición de la ventana gráfica intacta.
(Entiendo que scrollTop invalidará la pantalla, pero ordené cuidadosamente las operaciones para evitar problemas de diseño. También estoy al tanto del repintado síncrono que ocurre cada segundo, es causado por el jquery.sparkline pero no es relevante para esta discusión).
Esto es lo que veo cuando trato de perfilarlo. .
¿Qué crees que podría estar causando la gran cantidad de operaciones de capa?
Alguna información sobre las Composite Layers que pueden ayudar
por lo que veo here dice
evento: capas compuestas
Descripción: Capas de imágenes compuestas por el motor de renderizado de Chrome.
para el significado de la palabra compuesto de wikipedia
La composición es la combinación de elementos visuales de fuentes separadas en imágenes individuales, a menudo para crear la ilusión de que todos esos elementos son partes de la misma escena.
así que este es el proceso de creación de la página que realmente vemos al tomar la salida de codificación / cambio de tamaño de las imágenes, analizar HTML y analizar CSS para hacer la página final que vemos
Tuve el mismo problema. Lo arreglé reduciendo el tamaño de las imágenes.
Había algunas miniaturas en la lista desplazable. El tamaño de cada miniatura era 3000x1800, pero CSS las redimensionó a 62x44. El uso de imágenes de 62x44 redujo el tiempo consumido para "capas compuestas".
La propiedad CSS will-change: transform en todos los elementos que necesiten repintado solucionó el problema con demasiadas capas compuestas para mí.