Un memory leak (perdita di memoria) accade quando una parte della nostra applicazione continua a occupare memoria anche se non serve più, il che può portare a prestazioni peggiori nel tempo, browser che consumano più RAM e comportamenti strani o rallentamenti.In JavaScript, ...

Nel tentativo di osservare eventi JavaScript come scroll o mousemove, notiamo che avvengono un numero imprecisato di volte al secondo. A volte, se l'operazione eseguita ad ogni trigger dell'evento è complessa, l'intera interfaccia si può bloccare.Diversamente dalla funzione ...

Quando in Javascript si usano eventi come keyup o resize, il browser può chiamare la funzione decine o centinaia di volte al secondo. Questo causa inevitabilmente rallentamenti o comportamenti inutili.Supponendo di avere un input in cui inserire del testo ed effettuare una ...

In cima agli obiettivi di uno sviluppatore frontend vi è la necessità di ottenere una pagina dinamica, responsiva e complessa con i tempi di caricamento azzerati, quasi più veloci dell'homepage di Google. Purtroppo sappiamo che è un traguardo che non riusciremo neanche a sfiorare...

requestAnimationFrame è un metodo nativo del browser che permette di eseguire una funzione prima del prossimo repaint. È pensato appositamente per l'esecuzione di animazioni, sincronizzate anche con il refresh rate dello schermo.Un'animazione gestita da requestAnimationFrame è ...

Stiamo cercando, da un paio di uscite, di trovare dei metodi per migliorare le tempistiche di painting della pagina, cercando di prioritizzare il repaint rispetto al reflow.Questi meccanismi CSS si attivano quando uno stile viene applicato ad un elemento. Dunque, per arrivare all...

Nello script precedente abbiamo visto come, all'interno di una pagina web, la creazione di componenti a video sia soggetta a tre differenti fasi: Reflow, Repaint, Composition. Di cui la prima, il reflow, è molto impattante in termini di tempo e risorse per essere portata a ...

In questo breve ciclo di script proveremo a capire come il browser esegue il rendering delle pagine web e come evitare operazioni costose per migliorare le prestazioni. Perchè a volte i problemi di latenza o aggiornamento non sono sempre da imputare alla connessione internet.Ogni...

Negli script precedenti abbiamo trattato i Web components: degli elementi HTML personalizzati che permettono di inscatolare una determinata funzionalità per poterla riutilizzare a piacimento in altre pagine della stessa applicazione o in altri progetti. Dopo l'introduzione e la ...

Nello script precedente non siamo stati del tutto sinceri riguardo i Web Component e la gestione degli eventi. Quello che abbiamo creato, e che ripresentiamo qui di seguito// HTML var button = document.getElementById('myButton');button.addEventListener('click', () => { alert...