Ciao, e benvenuto nella quinta puntata della settantasettesima stagione. La volta scorsa i macchinisti hanno dato a ogni scatola il suo rettangolo. Oggi la puntata più onesta della stagione: cosa succede quando qualcosa si muove, e perché rimettere in scena è la cosa più cara che un browser fa, e la più facile da innescare cento volte per sbaglio. Il titolo: quando il palco si stringe.
Prima, perché è inevitabile. Il web è vivo. La finestra si ridimensiona, il testo arriva, un'immagine compare con la sua dimensione vera, il codice inserisce un nodo, una classe cambia una larghezza. Ognuna di queste cose cambia la geometria di una scatola, e abbiamo visto la volta scorsa che la geometria è una rete di dipendenze. Quindi i macchinisti devono rimettere in posizione gli attori. Questo rimettere in scena è la messa in scena rifatta.
Perché è cara? Ecco il cuore onesto. Cambi la dimensione di una scatola, e quasi mai è un problema di quella scatola sola. Prendeva tutta la larghezza, quindi il blocco successivo scende; questo sposta tutto ciò che sta sotto; un paragrafo più alto spinge più in alto la sua sezione, che spinge più in alto il suo contenitore, che sposta i suoi fratelli. Un sasso solo, e una valanga intera. Nel caso peggiore, toccare una cosa rimette in posizione tutto il palco. La messa in scena è cara non perché sistemare una scatola sia difficile, ma perché le scatole non si muovono mai da sole.
La difesa del motore è rifare solo ciò che è cambiato. Il motore non è ingenuo. Quando qualcosa cambia, marca le scatole coinvolte come da rifare, e prova a rimettere in scena solo quella parte, riusando tutto il resto intatto. Un cambiamento in un angolo profondo, idealmente, rifà solo quell'angolo. È per questo che quasi tutti i cambiamenti, nella pratica, sono economici: la valanga di solito è contenuta. Ma il contenimento non è garantito: certi cambiamenti, una larghezza in cima, l'arrivo di un carattere, sporcano davvero tutto.
E adesso la trappola che ti tendi da solo, perché morde il codice vero ed è sottile. Il motore vorrebbe raggruppare: lasciarti fare un mucchio di cambiamenti e poi rimettere in scena una volta sola. Ma se il tuo codice cambia qualcosa e poi, subito dopo, chiede una misura, quanto è largo adesso?, il motore è costretto a rimettere in scena in quel momento, sincrono, prima che la tua riga successiva giri. Fallo dentro un ciclo, cambia, misura, cambia, misura, e costringi una rimessa in scena completa a ogni giro: cento scatole, cento rimesse in scena, quando ne bastava una. Questo è il flagello del layout: alternare modifiche e letture della geometria, così che il motore non possa mai raggruppare. La cura, una volta che la vedi, è semplice: leggi tutte le misure prima, poi fai tutte le modifiche.
Ed è anche uno dei motivi per cui sono nati certi strumenti del davanti, quelli che tengono una copia dell'albero: raggruppano i tuoi cambiamenti e li applicano insieme, così il motore rimette in scena una volta invece che a ogni modifica. Non sono più veloci nella messa in scena: sono disciplinati nel non innescarla di continuo. La stessa disciplina puoi averla a mano.
Il conto onesto è questo. Rimettere in scena è il prezzo di una disposizione viva. Non puoi evitarla: una pagina che non si rimette mai in scena è un'immagine statica, non una pagina web. Quello che puoi fare è rispettarla: sapere che i cambiamenti di geometria si propagano, fidarti che il motore li contenga quando può, e non costringerlo mai a rimettere in scena dentro un ciclo chiedendo misure a metà. Lo stadio caro non è un difetto: è ciò che la pagina si riassesta da sola costa davvero, pagato ogni volta che qualcosa si muove.
E qui il nostro filo si fa affilato. Una rimessa in scena rientra nella catena quasi in cima: dopo lo stile, rifai la disposizione, poi dipingi, poi componi. È quasi tutta la catena da capo, ed è per questo che è il livello pesante. Nelle prossime puntate incontreremo cambiamenti che rientrano più in basso, solo dipingere o solo comporre, e costano una frazione. Sapere quali cambiamenti rimettono in scena e quali no è l'istinto di prestazioni più utile che ci sia sul web.
Voglio lasciarti con la regola d'oro della disposizione. Rimettere in scena è la cosa più cara che un browser fa, perché le scatole non si muovono mai da sole: ne tocchi una e l'onda può attraversare tutto il palco. Non puoi eliminarla, una pagina viva la richiede; ma puoi non provocarla a vuoto. Due cose soltanto: raggruppa i tuoi cambiamenti invece di spargerli, e non chiedere mai una misura in mezzo a una serie di modifiche, perché quella domanda costringe la squadra a rimettere in scena all'istante. Leggi tutte le misure prima, poi fai tutte le modifiche. È una disciplina piccola che, su una pagina viva, è la differenza tra fluido e a scatti.
Per oggi ci fermiamo qui. Abbiamo visto perché rimettere in scena è inevitabile e perché è caro, con la valanga che parte da un sasso solo; la difesa del motore, che rifà solo la parte segnata come da cambiare; il flagello che ti tendi da solo alternando modifiche e misure; e il posto della rimessa in scena nella catena, quasi in cima, cioè il livello più pesante. Nella prossima puntata: dare colore. Nelle note trovi qualche spunto. Se ti è utile, condividila. Grazie per l'ascolto, e ci sentiamo alla prossima.