Applicazioni più fluide con la modalità Frame

Di - 5 December 2012 - in

In un nostro precedente articolo abbiamo mostrato alcune nuove features introdotte in Chrome Developer Tools.
Quest’oggi vogliamo soffermare la nostra attenzione sulla modalità Frame inserita nel pannello della Timeline, che consente di visualizzare le performance di una browser-based application. Una nuova potente funzionalità offerta dal team di Chrome per aiutare gli sviluppatori ad individuare ed eliminare le cause del jitter (tremolio) nelle animazioni, che occorrono ad esempio quando giochiamo, ed a ridurre il ritardo che si verifica in seguito ad un’azione, ad esempio quando si fa lo scrolling di una pagina.

Prima di poter utilizzare questo strumento, è necessario capire cos’è un Frame. Questo potrebbe essere rappresentato dalla sequenza delle presenti istruzioni:

  1. Esecuzione delle animazioni Javascript e di altri gestori di eventi
  2. Aggiornamento delle animazioni CSS
  3. Ricalcolo degli stili e del layout degli elementi nel DOM
  4. Ridisegnare i livelli aggiornati della pagina
  5. Comporli e presentarli all’utente

Onde evitare di ‘mancare’ il frame e ridurne quindi il tempo di caricamento, è necessario che i passi su descritti vengano eseguiti in un tempo massimo di 16.6 ms, considerando una frequenza di aggiornamento pari a 60Hz.

Per capire come questa funzionalità possa essere utile, consigliamo di avviare un gioco sul browser Chrome, dopodiché aprire il Developer Tools e registrare la Timeline mentre il gioco è in esecuzione. La modalità Frame mostrerà alcune barre colorate dove ogni colore rappresenta un tipo di evento diverso: il colore blu mostra l’attività di rete ed il parsing dell’HTML, il giallo l’esecuzione di codice JavaScript, il viola mostra il tempo di ricalcolo dello stile e del layout, ed infine il colore verde indica il ridisegno dei livelli. Inoltre, cliccando su un frame o passandoci semplicemente il mouse sopra, verranno mostrate alcune informazioni utili come la durata espressa in termini di ms, di fps e di cpu time ed altre statistiche più dettagliate.

Un ulteriore elemento di supporto viene fornito dai segnali di warning mostrati sui layout realizzati in modo “anomalo”, i cui componenti ad esempio sono stati creati all’interno di un ciclo. In questo caso, passando semplicemente il mouse sopra l’evento layout, verranno mostrati due stack: uno che ha invalidato il DOM e l’altro che ha causato il layout sincrono, fonte di un possibile collo di bottiglia.

Infine, per trattare con le animzaioni, è fortemente consigliato utilizzare le requestAnimationFrame API, che garantiranno la perfetta sincronizzazione del codice delle animazioni con il rendering del display.

Per ulteriori informazioni su come ottimizzare le prestazioni di rendering di una pagina è possibile consultare l’articolo realizzato da Tom Wiltzius.

 

Via | Chromium blog

Leave a Reply

Fabrizio Variano Articolo scritto da

Laureato e specializzato in Informatica con il massimo dei voti, lavora come Software engineer con compiti di team leading progettando e sviluppando soluzioni in ambito web con tecnologie Java e “dintorni”. Grande appassionato di tecnologia, negli ultimi anni si è avvicinato all’ambito mobile, sia hardware che software, con l’intento di far suo questo mondo affascinante. Oltre a viaggiare, tra i suoi hobby ci sono: la moto, la cucina ed il cinema.

Contatta l'autore

Previous post:

Next post: