Ottimizza l'esecuzione di JavaScript

JavaScript attiva spesso modifiche visive. A volte avviene direttamente tramite manipolazioni dello stile, altre volte tramite calcoli che comportano modifiche visive, come la ricerca o l'ordinamento dei dati. Il codice JavaScript con tempistiche errate o che richiede molto tempo è una causa comune di problemi di prestazioni. Dovresti cercare di ridurne al minimo l'impatto, se possibile.

JavaScript attiva spesso modifiche visive. A volte avviene direttamente tramite manipolazione degli stili, altre volte tramite calcoli che generano modifiche visive, come la ricerca o l'ordinamento dei dati. Il codice JavaScript con tempistiche sbagliate o di lunga esecuzione è una causa comune di problemi di prestazioni. Dovresti cercare di ridurlo al minimo, se possibile.

Il profiling del rendimento di JavaScript può essere una vera e propria arte, perché il codice JavaScript che scrivi non è affatto simile al codice effettivamente eseguito. I browser moderni utilizzano compilatori JIT e ogni sorta di ottimizzazioni e trucchi per provare a offrirti l'esecuzione più rapida possibile, il che cambia notevolmente la dinamica del codice.

Detto questo, però, ci sono alcune cose che puoi fare per aiutare le tue app a eseguire bene JavaScript.

Riepilogo

• Evita di utilizzare setTimeout o setInterval per gli aggiornamenti visivi; utilizza sempre requestAnimationFrame.
• Sposta il codice JavaScript a esecuzione prolungata dal thread principale ai worker web.
• Utilizza le micro-attività per apportare modifiche al DOM in più frame.
• Utilizza la funzionalità Sequenza temporale e il Profiler JavaScript di Chrome DevTools per valutare l'impatto di JavaScript.

Utilizza requestAnimationFrame per le modifiche visive

Quando sullo schermo si verificano modifiche visive, devi eseguire il tuo lavoro al momento giusto per il browser, ovvero all'inizio del frame. L'unico modo per garantire che il codice JavaScript venga eseguito all'inizio di un frame è utilizzare requestAnimationFrame.

/**
    * If run as a requestAnimationFrame callback, this
    * will be run at the start of the frame.
    */
function updateScreen(time) {
    // Make visual updates here.
}

requestAnimationFrame(updateScreen);

I framework o i sample potrebbero utilizzare setTimeout o setInterval per apportare modifiche visive come le animazioni, ma il problema è che il callback verrà eseguito a un certo punto del frame, possibilmente alla fine, e questo può spesso causare la perdita di un frame, con conseguente balbuzie.