Ciao, e benvenuto nell'ottava puntata della settantasettesima stagione. Abbiamo percorso tutta la catena, dallo stile al comporre, e visto la scala dei costi. Oggi la mettiamo su un orologio: lo spettacolo va in scena dal vivo, e ogni fotogramma ha una scadenza. È la puntata pratica, dove la teoria diventa un budget che puoi rispettare o mancare. Il titolo: il ritmo dei fotogrammi.
Partiamo dall'orologio. Lo schermo si rinfresca circa sessanta volte al secondo. Per sembrare fluido, il motore deve presentare un fotogramma fresco e corretto a ogni rinfresco, più o meno ogni sedici millesimi di secondo. Quello è il budget. Tutto ciò che deve succedere per un fotogramma, far girare le animazioni, far girare il tuo codice in scadenza, ricalcolare lo stile, rimettere in scena, ridipingere, comporre, deve stare dentro quella fettina. Se la manchi, il fotogramma è in ritardo, e l'occhio vede uno strappo, un salto. Quello strappo ha un nome: lo scatto.
Cosa succede a ogni fotogramma? Ogni giro, sulla squadra principale, in ordine: gestisci l'ingresso, un tocco, uno scorrimento; fai girare il codice in programma, compreso l'aggancio speciale che gira appena prima del prossimo fotogramma, il posto giusto per il codice delle animazioni; e poi, se qualcosa è cambiato, ricalcoli lo stile, rimetti in scena, ridipingi ciò che è sporco, e consegni i pannelli alla seconda squadra perché li presenti. Questo è un giro del ciclo: sessanta giri al secondo, ognuno sotto il budget. Quell'aggancio è il punto giusto per le modifiche visive, così cadono nello stesso fotogramma invece di causarne uno in più.
Ed ecco perché un codice lungo è il nemico. La squadra principale fa una cosa alla volta. Se il tuo codice gira per cinquanta millesimi, la squadra è bloccata lì dentro: non può dare stile, non può mettere in scena, non può presentare. Tre fotogrammi scadono e passano senza che si mostri niente di nuovo. La pagina si congela, il clic non risponde, lo scorrimento si pianta. Un solo lavoro lungo fa saltare il budget per ogni fotogramma che attraversa. È per questo che è solo un po' di codice può rovinare la fluidità: sulla squadra principale, il tuo codice e il disegno della pagina si contendono gli stessi sedici millesimi. La regola pratica: spezza il lavoro lungo in pezzetti, o portalo del tutto fuori dalla squadra principale.
Ricorda però la via di fuga: la seconda squadra. Tutto ciò che è di solo comporre, una trasformazione, una sfumatura su un pannello, può essere presentato dalla seconda squadra anche mentre la principale è impantanata nel tuo codice. Ecco perché un'animazione costruita bene continua a scorrere durante un momento affollato, e una basata sulla disposizione si congela del tutto. Il budget del fotogramma in realtà è due budget: quello della squadra principale, che il tuo codice condivide, e quello della seconda squadra, che quasi non tocca. Metti il movimento sulla seconda squadra, e sopravvive a una via principale occupata.
E qui i tre livelli diventano una leva pratica, ed è il cuore di oggi. Prima di animare o cambiare qualcosa a ogni fotogramma, chiediti: che livello colpisce? Se rimette in scena, stai rifacendo quasi tutta la catena sessanta volte al secondo: quasi di sicuro sei fuori budget. Se solo ridipinge, è più economico, forse va bene. Se è di solo comporre, sfiora appena la squadra principale e scivola liscio. Lo stesso obiettivo visivo ha di solito una strada cara e una economica. Lavorare sulle prestazioni, sul web, è soprattutto spostare in giù le tue modifiche per fotogramma, dalla rimessa in scena alla ridipinta al comporre, finché non stanno nel budget.
E come lo vedi davvero? Non tiri a indovinare: misuri. Gli strumenti di misura del browser ti mostrano i fotogrammi, quali sono andati oltre, e quale stadio ha mangiato il tempo: una barra di disposizione alta vuol dire che stai rimettendo in scena; un lungo blocco di codice vuol dire che un lavoro sta monopolizzando la squadra. Il ciclo e i livelli non sono astrazioni: sono lì, sulla linea del tempo, con l'etichetta. Imparare a leggere quella linea è come trasformi sembra a scatti in questa rimessa in scena durante lo scorrimento è il problema.
Voglio lasciarti con il modo di pensare che rende fluido il web. Tutto accade dentro un ritmo: circa sedici millesimi per fotogramma, e in quel tempo devono starci il tuo codice e tutta la fine della catena. Due regole pratiche, e hai quasi tutto. Primo: non intasare la squadra principale, spezza il lavoro lungo o portalo via, perché mentre il tuo codice gira nessun fotogramma esce. Secondo: fai in modo che ciò che cambia a ogni fotogramma rientri il più in basso possibile nella catena, idealmente al solo comporre, così da non rifare la disposizione sessanta volte al secondo. Non devi memorizzare l'intera catena: ti basta, prima di animare qualcosa, chiederti a che livello rientra, e se ci sta nel budget.
Per oggi ci fermiamo qui. Abbiamo messo la catena su un orologio: il budget di circa sedici millesimi, il giro che a ogni fotogramma gestisce ingresso, codice, stile, disposizione, disegno e comporre; il codice lungo che intasa la squadra principale e fa saltare i fotogrammi; la seconda squadra che tiene vivo il movimento; e i tre livelli come leva, con la misura al posto dell'indovinare. Nella prossima puntata: non tutto va ricalcolato. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.