Regole CSS che rallentano la velocità del browser (rendering)

Question

Sto cercando i più grandi errori che puoi fare nel tuo codice CSS; Regole CSS che rallentano la velocità del browser (rendering).

Ad esempio:

.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; 
} 

Se si dispone di 10 elementi trascinabili (molti tag all'interno) con questa classe, la resistenza sarebbe molto lento (jerk). Quindi qualcuno conosce un elenco di regole CSS che non dovresti usare?

Answer 1

Uno che è facile da realizzare: l'uso di una piccola immagine (diciamo 5x5) come una ripetizione di sfondo per aree grandi è lento quando si tratta di rendering. Quindi è consigliabile utilizzare un'immagine più grande per i modelli ripetuti (ad esempio 50x50). La dimensione di un file aumenta solo un po ', ma le prestazioni sono decisamente migliori.

Answer 2

Evita percorsi lunghi cioè

body div div ul li span a {} 

espressioni Evitare css cioè

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

E tutto ciò che Microsoft ha implementato cioè DX ecc

Answer 3

Assegnazione di impostazioni di overflow agli elementi rallenta lo scorrimento nella telefonia mobile browser