google-chrome - missing - performance chrome

Línea de tiempo de Chrome: ¿cómo puedo determinar la causa de una entrada de registro de "Estilo de recálculo"?

Question

Al perfilar una página con el registrador de línea de tiempo incorporado en Chrome, veo entradas repetidas de "Recalcular estilo". No tienen información obvia para vincularlos al elemento o evento DOM.

¿Cómo puedo determinar mejor la causa de estas entradas?

Answer 1

Acabo de tener el mismo problema (por eso encontré tu pregunta).

Mi problema fue debido a una transición de CSS3 a todas las propiedades. Había sido perezosa, cuando todo lo que necesitaba era un relleno de transición.

Implementando ese único cambio hizo el bucle.

Answer 2

Estoy casi seguro de que tienes una animación de repetición infinita en tu página. Eso es lo que causó Recalcular Estilo sin decir qué lo causó.

Answer 3

Mi consejo para ti sería utilizar la versión Chrome Canary de Chrome. Paul Irish tiene una buena demostración de cómo usar Timeline en Chrome Dev Tools here

Puede simplemente hacer clic en el evento, por ejemplo, ''Recalcular estilo'', y debería obtener un seguimiento en miniatura de la pila que indica dónde ocurrió el evento en su código.

Answer 4

Pude probar si las transiciones o animaciones de CSS activaban recálculos en mi página. Usé jQuery para hacer esto, pero puedes usar lo que quieras:

$(''*'').css(''transition'', ''none'');
$(''*'').css(''animation'', ''none'');

Esto efectivamente deshabilita las transiciones y animaciones en cada elemento de su página. Los ejecuté uno a la vez, y luego volví a pasar mi perfil. En mi caso, las animaciones fueron las culpables.

.css(''animation'') devolverá algo como

"myCustomAnimation 15s linear 0s infinite normal none running"

o si no hay animación,

"none 0s ease 0s 1 normal none running"

Entonces, después de actualizar (para volver a habilitar las animaciones), el siguiente fragmento de código registra cada elemento que tiene una animación definida:

$(''*'').each(function(){
  if($(this).css(''animation'').split('' '')[0] != ''none''){ //you could also check for infinite here if you want
    console.log(this);
  }
});

Al deshabilitar las animaciones en cada uno de ellos individualmente, pude determinar cuál estaba causando mis problemas.

Answer 5

Una alternativa a la versión de jQuery publicada para investigación es una simple línea en la consola:

window.onanimationiteration = console.log;

Esto imprimirá una línea cada vez que se ejecute alguna animación, incluido el nombre de la animación y el elemento donde se aplica la animación.