Perché le animazioni dei siti si fermano quando cambi scheda

Stai seguendo una pagina con elementi in movimento, apri un'altra scheda per rispondere a un messaggio e, quando torni indietro, l'animazione sembra riprendere da un punto diverso. Non sempre c'entra la connessione. Spesso è il browser ad aver ridotto il lavoro dedicato alla pagina rimasta in secondo piano.

Chrome, Firefox e gli altri browser gestiscono continuamente le risorse del dispositivo. Una scheda visibile riceve normalmente più attenzione di una che non stai guardando, soprattutto quando deve aggiornare immagini e animazioni. Questo comportamento permette di limitare il consumo di processore e batteria.

Che cosa succede ai fotogrammi quando la scheda scompare

Le animazioni digitali funzionano mostrando una successione di immagini, chiamate frame. Per rendere fluido il movimento, il browser deve aggiornare la schermata molte volte nell'arco di un secondo.

Per organizzare questi aggiornamenti, gli sviluppatori possono usare la funzione JavaScript “requestAnimationFrame”. Il browser esegue il codice in prossimità del successivo ridisegno, evitando di produrre fotogrammi inutili quando la pagina non è visibile. Nelle schede in background, infatti, le chiamate vengono normalmente sospese.

La gestione riguarda siti di shopping con modelli tridimensionali, pagine con grafici animati e cataloghi di giochi da casino accessibili online con elementi grafici in movimento. Ogni interfaccia può combinare animazioni, pulsanti e informazioni che cambiano durante l'utilizzo.

Il tempo continua a passare anche senza animazioni

Immaginiamo un cerchio che deve compiere un giro sullo schermo in dieci secondi. Se il programma conta soltanto i fotogrammi mostrati, dopo un cambio di scheda il movimento potrebbe impiegare più tempo del previsto. Se invece calcola quanto tempo è effettivamente trascorso, può aggiornare direttamente la posizione dell'oggetto al ritorno dell'utente.

È una differenza importante anche per timer, barre di avanzamento e contatori. I browser possono rallentare l'esecuzione di alcuni timer JavaScript nelle pagine inattive. Un numero visualizzato sullo schermo potrebbe quindi aggiornarsi con minore frequenza, pur continuando a esistere un orario di riferimento per l'operazione.

Per gestire questi casi, una pagina può utilizzare la Page Visibility API, che comunica quando il documento diventa visibile o nascosto. Il software può così sospendere gli aggiornamenti grafici e ricalcolare quelli necessari al ritorno in primo piano.

Dati e immagini seguono percorsi diversi

Un sito interattivo può mostrare nello stesso momento una sequenza animata e informazioni provenienti da un servizio remoto. È il caso di chat, aste digitali o interfacce di roulette disponibili online, dove elementi grafici e dati della sessione convivono sulla stessa schermata.

Dietro la pagina possono quindi esserci più processi. Il browser disegna i componenti visibili, mentre l'applicazione gestisce lo stato dell'interfaccia e riceve eventuali aggiornamenti dal server. Quando l'utente torna alla scheda, il programma può richiedere informazioni aggiornate e ridisegnare i componenti interessati.

Come capire se il rallentamento dipende dal browser

Un indizio è osservare quando compare il problema. Se l'animazione procede regolarmente mentre la scheda è aperta e cambia comportamento soltanto dopo averla lasciata in background, può trattarsi della gestione ordinaria delle risorse.

Se invece il movimento scatta anche in primo piano, conviene controllare quante schede sono aperte, l'utilizzo della memoria e la presenza di estensioni particolarmente pesanti. Provare la stessa pagina in una finestra senza estensioni aiuta a capire se il rallentamento dipende da componenti aggiuntivi.

Il punto da ricordare è semplice. Un sito non lavora necessariamente allo stesso ritmo quando lo stai guardando e quando è nascosto dietro un'altra scheda. Gran parte della fluidità che vediamo dipende proprio da come il browser decide di distribuire le risorse disponibili.