Métodos para reducir el número de cálculos CSS en la página web

Question

Nuestra aplicación en el trabajo utiliza el marco ExtJS (Sencha) para la interfaz de usuario. El problema que tengo con el marco es la cantidad de HTML que genera el marco.

He notado que las áreas del sistema que los usuarios informan que son lentas tienen una tonelada de llamadas de cálculo de CSS. Medí esto en Speedtracer de Google y algunas páginas tardan 8 segundos en cargarse. El 80% del tiempo se dedica exclusivamente a cálculos de CSS. Antes de tratar de alterar la forma en que funciona el framework, ¿hay alguna forma de retrasar el cálculo CSS de una página, o se hacen estos cálculos cuando se renderizan los objetos?

He estado buscando maneras de hacer esto, y tal vez mi "google-fu" es terrible, pero no he encontrado nada concreto sobre cómo lograr algo como esto.

EDITAR: Después de hablar un colega, me señaló en la dirección de llamar a .suspendEvents() en la grilla antes de cargar cualquier dato y .resumeEvents() luego, esto solo ha ahorrado 300ms de tiempo de carga: O Esto está reduciendo el número de llamadas .getStyle detectadas por Firebug. Todavía estoy por probar esta diferencia con Google SpeedTracer

Answer 1

Es difícil decir cuál es la causa de su problema de rendimiento sin saber exactamente lo que su aplicación se está haciendo. CSS tendrá algún impacto but not much, es más probable que algunos JavaScript en su aplicación sean causing excessive reflows mientras la página está en proceso.

Resumen del artículo de stubornella (el segundo enlace)

de reflujo es el proceso por el cual los elementos de una página web Cómo dispuestas de acuerdo con las reglas de estilo. Un reflujo es computacionalmente costoso, pero normalmente es posible dibujar una página HTML estática en un solo reflujo siempre que la representación de cualquier elemento posterior no afecte a los elementos que ya se han dibujado. Cosas que puedan dar lugar a múltiples reflujos y algunos arounds de trabajo:

1. dinámicamente agregar clases CSS a los elementos - las clases cambian tan bajas en el árbol DOM como sea posible para limitar el impacto
2. Añadir varios elementos DOM - cree una estructura invisible y agregarlo en una sola operación en lugar
3. Adición de múltiples estilos en línea a los elementos visibles - mejor crear una clase con todos los estilos, a continuación, aplicar la clase
4. aplicar animaciones a los elementos posicionados relativamente - mejor para animar position: fixed o position: absolute elementos como t no afectará a ninguna otra parte
5. Animaciones de grano fino: mover un elemento 3px a la vez puede ser más suave que moverlo 1px a la vez porque evita dos reflujos
6. Las tablas son uno de los pocos casos donde la representación de un elemento más tarde en el DOM puede cambiar la forma de un elemento anterior se dictarán - si tiene que usar tablas, utilice table-layout: fixed

Answer 2

Smartoptimizer es realmente increíble, ¿has probado alguno de esos tipos de herramientas de compresión de código gzip?

https://github.com/farhadi/SmartOptimizer

Answer 3

también hemos estado luchando con el añadido del uso de extJS - aunque el marco es muy amplia, el golpe de rendimiento (especialmente con IE6) ha sido una gran limitación.Éstos son algunos de los pasos que dimos para optimizar el marco:

1. Streamline la biblioteca para incluir sólo los paquetes que se utilizan en su sitio. Esto significa personalizar el archivo jsb2 y desplegar su propia implementación de extJS.
2. En nuestras pruebas de rendimiento identificamos al CSS como el mayor delincuente. Una ventaja de usar una compilación personalizada de extJS es la reducción de los selectores CSS no utilizados. Para optimizar aún más el CSS, usamos Google Page Page para identificar los selectores CSS ineficientes para refactorizarlos/eliminarlos. Prestar especial atención a:
   • Pseudo : hover selector de
   • Universal * llave con selectores de descendientes

Los ext "light" debería producir importantes mejoras de rendimiento resultantes, en particular en IE6. Aunque el equipo de Secha está realizando continuas mejoras de rendimiento en cada versión, la sobrecarga de cargar todo el marco es demasiado cara como para ignorarla.

Espero que esto ayude ...