Reglas CSS que ralentizan la velocidad del navegador (representación)

Question

Estoy buscando los errores más grandes que puede cometer en su código CSS; Reglas CSS que ralentizan la velocidad del navegador (renderizado).

Por ejemplo:

.myDraggables { 
    box-shadow: 0px 1px 2px #000 inset; 
    -moz-box-shadow: 0px 1px 2px #000 inset; 
    -webkit-box-shadow: 0px 1px 2px #000 inset; 

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cdcdcd, endColorstr=#fff); 
    background: -webkit-gradient(linear, left top, left bottom, from(#cdcdcd), to(#fff)); 
    background: -moz-linear-gradient(top, #cdcdcd, #fff); 

    border-radius:5px 7px 1px 3px; 
    -moz-border-radius:5px 7px 1px 3px; 
    -webkit-border-radius:5px 7px 1px 3px; 
} 

Si usted tiene 10 elementos arrastrables (muchas etiquetas interiores) con esta clase, la resistencia sería muy lento (sacudida). Entonces, ¿alguien sabe una lista de reglas de CSS que no debería usar?

Answer 1

Uno que es fácil de hacer: usar una imagen pequeña (digamos 5x5) como repetición de fondo para áreas grandes es lento cuando se trata de renderizar. Por lo tanto, es aconsejable usar una imagen más grande para repetir patrones (por ejemplo, 50x50). El tamaño de un archivo aumenta solo un poco, pero el rendimiento es mucho mejor.

Answer 2

fin de evitar transmisiones de largo, es decir,

body div div ul li span a {} 

expresiones Evitar css, es decir

background-color: expression((new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00"); 

Y cualquier cosa que Microsoft implementó es decir DX etc.

Answer 3

Asignación de ajustes de desbordamiento de los elementos frena el desplazamiento en el móvil navegadores