2012-07-24 6 views

risposta

16

Fondamentalmente, sono il tuo browser che spiega come disegnare le modifiche apportate alla pagina.

Non preoccuparti di sbarazzartene, se lo facessi, il tuo sito sarebbe statico. Tuttavia ... ... se si vuole fare qualcosa che IS sia utile per le prestazioni, che ha a che fare con reflows e repaints, quindi raggruppare le modifiche insieme.

Diciamo che hai un lavoro su Twitter. E il tuo compito è scrivere la prossima versione della finestra che aggiunge ogni post di twitter sullo schermo.

Se un utente riceve 250 nuovi tweet nella loro sequenza temporale e ne aggiungi ciascuno in un ciclo, uno dopo l'altro, il browser rallenterà, perché ogni volta che ne aggiungi uno, dovrà ridursi (sposta le cose in giro per creare spazio per la cosa che hai aggiunto) e ridisegna (stile tutto ciò che è stato influenzato dall'aggiunta).

Un modo migliore per farlo sarebbe quello di creare l'elenco di nuovi tweet insieme off-DOM (ovvero: con elementi che non sono effettivamente nella pagina in questo momento), e quindi aggiungerli tutti in una volta. Questo riduce il numero di volte che un browser deve capire dove tutto deve andare.

@Fabricio: la micro-ottimizzazione potrebbe non essere ottima, ma aggiungere centinaia di elementi del browser in un ciclo, anziché inserirli tutti nello stesso momento, può fare una grande differenza. Basta chiedere ai ragazzi di Twitter, che non si sono preoccupati di memorizzare nella cache i loro oggetti jQuery.

2

È possibile utilizzare la scheda "Profili" e la scheda "Audits" per rilevare le prestazioni del codice. Ti darà una relazione sui tuoi codici.

È possibile ridurre la pagina Ricalcola, layout e il numero di colori in molti modi.

  • Aggiungi più bambini contemporaneamente.
  • Nascondere gli elementi prima di modificarli.
  • Fornisci immagini e altri elementi in altezza e larghezza.
6

Ecco una lista molto utile di proprietà e metodi che innescano il layout (reflow) di una pagina:

http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

Si vuole ridurre al minimo queste chiamate per quanto possibile - soprattutto in situazioni in cui le prestazioni è fondamentale, ad esempio durante l'evento di scorrimento o durante l'animazione di grandi blocchi di contenuti.