CSS3 - Quali sono le migliori pratiche sulle prestazioni?

Question

L'anno scorso ho passato molto tempo a leggere le prestazioni javascript, i colli di bottiglia e le best practice. Nel mio ultimo progetto sto usando CSS3 con fallbacks in javascript/jquery per animazioni di base ed effetti come hovers e sono interessato a sperimentare ulteriormente con CSS3.

Ci sono problemi con le prestazioni CSS3?

Se sì, quali sono le migliori pratiche?

Ad esempio, lo transition: all 150ms ease-out; utilizza più memoria di transition: opacity 150ms ease-out, background-color 150ms ease-out;?

[si prega di non solo rispondere alla mia domanda esempio!]

Answer 1

Per verificare che fuori, si dovrebbe fare l'animazione succedere 500 o 1000 volte e tempo.

Le animazioni su tela e HTML5 offrono più CPU che flash. Flash su iPhone supera le alternative HTML5. Vorrei fare le mie animazioni, audio e video usando JQuery come flessibilità di swap HTML5 per comodità.

Answer 2

O sì! Se ti piace armeggiare con le prestazioni, sarai felice di sapere che ci sono molti problemi di prestazioni con CSS3.

1. Ridisegno e Riscorrimento. È abbastanza facile causare ripetizioni e riverberi non necessari e quindi rendere l'intera pagina in ritardo. Leggi: Esempio estremo: http://files.myopera.com/c69/blog/lag-me.html
2. Scorrere e passare il mouse. Quando si scorre o si passa il mouse, il browser deve eseguire il rendering di nuovo contenuto. Webkit è intelligente qui, poiché memorizza nella cache le pagine come immagini statiche, quindi NON esegue il rendering della pagina, quando si scorre. Ma puoi ignorare questa ottimizzazione, utilizzando elementi come lo sfondo trasparente nel blocco che stai scorrendo, aggiungendo la rotazione al passaggio del mouse, aggiungendo position:fixed intestazioni/piè di pagina appiccicosi con e così via - l'effetto sarà diffidente nei vari browser, Opera sembra attualmente più interessata .
3. Box-shadow è il male. Le ombre delle caselle hanno una diversa qualità di rendering in diversi browser (basso nel Webkit, alto in Opera/IE9, varia tra le versioni di Firefox) - e quindi il loro impatto sulle prestazioni è diverso tra i diversi browser - tuttavia, inset casella shadow e box-shadows con un raggio di propagazione ampio può causare blocchi osservabili durante il ridisegno in qualsiasi browser.
4. I galleggianti, i tavoli e i loro amici sono malvagi. Sembra strano all'inizio, ma leggi questo articolo (in russo) - http://chikuyonok.ru/2010/11/optimization-story/ - potrebbe farti risparmiare un po 'di capelli in testa. L'idea principale è che i figli degli elementi flottanti causino il reflusso della catena su tutte le modifiche.
5. Il raggio di raggio è molto costoso, anche più costoso dei gradienti. Non influisce sul layout, ma influisce sul ridisegno. http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/
6. ritardo gradienti. I gradienti CSS sono un nuovo strumento molto interessante, ne sono un grande fan. Tuttavia, solo un paio di test hanno dimostrato che non dovresti usarli, se prevedi di avere molti elementi con sfumatura e richiedono un'interfaccia reattiva :(C'è un trucco/hack, però, usando la tela per rendere immagini e set di sfumature come sfondo tramite l'url dei dati
7. La trasparenza è costosa. Se si dispone di un numero di elementi in movimento che si intersecano e sono semitrasparenti (opacità < 0, colore rgba, png, angoli arrotondati (!), attendere il ritardo. Spesso può essere risolto limitando il numero di elementi trasparenti, che possono sovrapporsi.
8. Le transizioni sono migliori di JS, ma ... Firefox non è in grado di eseguire il rendering delle transizioni correttamente, se le si applica a oltre 150 elementi contemporaneamente. Opera non è in grado di applicare le transizioni prima e dopo. IE9 non li supporta affatto. Prova prima di usarli, ma in generale - sono più veloci degli analoghi JS (jQuery.animate).
9. Fare attenzione al carico della CPU. Il suo cross browser di utilizzo della memoria è difficile da misurare (ma puoi farlo in chrome e interpolare i risultati, con un po 'di sale) ma è facile osservare l'utilizzo della cpu (tramite Process Explorer o strumenti di sistema). I picchi ti mostreranno i posti dove hai bisogno della tua attenzione.
10. I vecchi browser sono vecchi. Non tentare di modernizzare IE6, Firefox 2, Safari 3. Quei browser non sono mai stati in grado di gestire cose nuove e interessanti. Lasciali in pace. Servi solo contenuti di base con stili di base. Gli utenti IE6 restanti saranno grati per questo.

Answer 3

Paul Irish on CSS3 performance