Perfilando una página con la grabadora de línea de tiempo incorporada en Chrome, veo repetidas entradas "Recalcular estilo". No tienen información obvia para vincularlos al elemento DOM o evento.Cronología de Chrome: ¿cómo puedo determinar la causa de una entrada de registro "Recalcular el estilo"?
¿Cómo puedo determinar mejor la causa de estas entradas?
Mi consejo es que utilices la compilación Chrome Canary de Chrome. Paul Irish tiene una buena demostración del uso de la línea de tiempo en Herramientas de desarrollo de Chrome here
Puede simplemente hacer clic en el evento, por ejemplo 'Recalcular estilo', y debe obtener un seguimiento de pila en miniatura que indique dónde ocurrió el evento en su código.
Acabo de tener el mismo problema (es por eso que encontré su pregunta).
Mi problema se debe a una propiedad de transición de CSS3. Había sido flojo, cuando todo lo que necesitaba era relleno de transición.
La implementación de ese cambio solo hizo el bucle
¿Cómo se enteró, qué lo estaba causando –
Hace más de dos años, discúlpeme si mi memoria es un poco vaga.;) Pero creo que acabo de hacer una prueba y un error. Eliminé todas las transiciones y luego agregué cada una hasta que vi el problema. Cuando encontré solo la clase que causaba problemas, limité la transición a la única propiedad que realmente necesitaba. Más suerte que nada en realidad ... – jBoive
Estoy casi seguro de que tiene algo de animación de repetición infinita en su página. Eso es lo que causó Recalcular Estilo sin decir qué lo causó.
Pude comprobar si las transiciones CSS o animaciones estaban desencadenando nuevos cálculos en mi página. Solía jQuery para hacer esto, pero se puede usar lo que quiera:
$('*').css('transition', 'none');
$('*').css('animation', 'none');
Esto desactiva eficazmente las transiciones y animaciones en cada elemento de la página. Los ejecuté uno a la vez, y luego volví a rastrear mis perfiles. En mi caso, las animaciones fueron las culpables.
.css('animation') volverá algo así como
"myCustomAnimation 15s linear 0s infinite normal none running"
o si no hay animación,
"none 0s ease 0s 1 normal none running"
Así que después de actualizar (para volver a activar las animaciones), el siguiente fragmento de registros cada elemento que tiene una animación definido:
$('*').each(function(){
if($(this).css('animation').split(' ')[0] != 'none'){ //you could also check for infinite here if you want
console.log(this);
}
});
Al deshabilitar animat iones sobre cada uno de ellos individualmente, pude determinar cuál causaba mis problemas.
La sugerencia de JQuery fue increíblemente útil, ya que permite un diagnóstico realmente rápido. Esto encontró rápidamente el origen de un problema para mí: una animación con 'animation-iteration: infinite' invalidaba sistemáticamente CSS y redibujaba, aunque el elemento afectado no aparecía en la pantalla. – jpolitz
Una alternativa a la versión de jQuery publicado para la investigación es un sencillo de una sola línea en la consola:
window.onanimationiteration = console.log;
Esto imprimirá una línea cada vez que algunas carreras de animación, incluyendo el nombre de la animación y el elemento donde se aplica la animación
Esa fue una demostración bastante útil, pero también hay entradas de "Recalcular estilo" que no muestran un seguimiento de pila y no parecen estar asociadas a ningún código. Cuando hay muchos elementos, obtengo esa entrada cada vez que hago clic, pero no he podido rastrear por qué necesita volver a calcular. – redbmk
Obtengo esto originado por GC menor. Así que supongo que buena suerte para resolverlo. –