¿Qué significa Recalculate Layout Paint mean in chrome developer tool Registros de TimeLine? y cómo mejorar el rendimiento de la página reduciendo la página Recalcular, diseño y conteo de pintura? puede dar alguna sugerencia? Gracias
Básicamente, son su navegador el que descifra cómo dibujar los cambios que realizó en la página.
No se preocupe por deshacerse de ellos; si lo hiciera, su sitio sería estático. Sin embargo ... ... si desea hacer algo que ES útil para el rendimiento, que tiene que ver con los reflujos y las repintaciones, y luego agrupe los cambios juntos.
Digamos que tienes un trabajo en Twitter. Y su trabajo es escribir la próxima versión de la ventana que agrega cada publicación de Twitter a la pantalla.
Si un usuario obtiene 250 nuevos tweets en su línea de tiempo, y agrega cada uno en un bucle, uno después del otro, el navegador va a reducir la velocidad, porque cada vez que agregue uno, tendrá que volver a generar (mueva las cosas para dejar espacio para lo que ha agregado) y vuelva a pintar (escriba todo lo que se haya visto afectado por la adición).
Una mejor forma de hacerlo sería crear la lista de nuevos tweets juntos fuera de DOM (es decir, con elementos que actualmente no están en la página), y luego agregarlos todos a la vez. Esto reduce la cantidad de veces que un navegador tiene que descubrir dónde debe ir todo.
@Fabricio - La optimización de micro podría no ser muy buena, pero agregar cientos de elementos del navegador en un bucle, en lugar de ponerlos todos al mismo tiempo, puede hacer una gran diferencia. Simplemente pregúntale a los chicos de Twitter, que no se molestaban en guardar en caché sus objetos jQuery.
Puede utilizar la pestaña "Perfiles" y la pestaña "Auditorías" para detectar el rendimiento de su código. El te dará un informe sobre tus códigos.
Puede reducir la página Recalcular, diseño y conteo de pintura de muchas maneras.
Aquí hay una lista muy útil de propiedades y métodos que desencadenan la disposición (reflujo) de una página:
http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html
Desea reducir al mínimo estas llamadas tanto como sea posible - especialmente en situaciones donde el rendimiento es fundamental, como durante el evento de desplazamiento, o al animar grandes bloques de contenido.
