Errori comuni di Javascript che influiscono gravemente sulle prestazioni? [chiuso]

Un killer di prestazioni comune chiama .length su HTMLCollection all'interno di un ciclo for :

function foo(collection) {
    for (var index = 0; index < collection.length; index++) {
        // do something awesome here
    }
}

Questo anti-pattern fa sì che la dimensione della collezione sia calcolata su ogni passaggio attraverso il ciclo. L'approccio migliore è calcolare la lunghezza fuori dal ciclo:

function foo(collection) {
    var collectionLen = collection.length;
    for (var index = 0; index < collectionLen; index++) {
        // do something awesome here
    }
}

No, il problema non viene da JS utilizzato come sostituzione flash. Se non sei convinto di ciò, documentati su actionscript: è molto vicino a JS.

Come performer killer, puoi trovare diverse cattive pratiche:

• Collega il gestore di eventi all'evento continuo, come lo scorrimento, il mouse o oggetti simili. Questo ha 2 inconvenienti: se l'evento non viene attivato abbastanza, la tua applicazione non sarà reattiva. Se è attivato troppo, avrai un enorme carico della CPU per niente.
• Effettuare chiamate AJAX sincrone. Javascript non è multithread, quindi, quando una parte di JS è in attesa di qualcosa, la tua applicazione è bloccata. È meglio utilizzare le chiamate AJAX asincrone e allo stesso modo utilizzare setTimeout / setInterval per suddividere una lunga fase di calcolo e mantenere reattiva l'applicazione.
• Elevata complessità dell'algoritmo come in qualsiasi altro linguaggio.

I gave some feedback on a website that used Javascript (jQuery) for its interaction and UI - it was fairly simple animations and manipulation, but the performance on a decent computer was horrific.

Il problema principale delle prestazioni è l'utilizzo di astrazioni di alto livello (come jQuery) senza comprendere il modello DOM sottostante e il modello di animazione CSS3 (o canvas, o svg).

Se non conosci come farlo senza le astrazioni, allora hai una conoscenza zero assoluta di quali tecniche sono veloci o lente.

Scopri JavaScript, impara il DOM. Una volta che conosci quei due e sai quali sono le tue astrazioni sotto il cofano, puoi usarle in modo efficiente. Naturalmente la maggior parte delle volte ti rendi conto che l'astrazione è lenta e basta farlo manualmente senza una libreria.

La bellezza e l'inconveniente di Javascript è che è estremamente flessibile. Detto questo, in realtà ti permette di fare cose che probabilmente non dovresti fare in molti casi.

Dalle recensioni del codice di cui ho fatto parte, le maggiori preoccupazioni tendono ad essere correlate al rendering CSS. Per gli sviluppatori JS più recenti, tendiamo a vedere troppe variabili utilizzate nell'ambito globale.

Inoltre, chiusure improprie possono spesso causare perdite di memoria. Tuttavia, la maggior parte dei framework Javascript moderni previene questo tipo di problemi a patto che il codice segua il framework.

Ecco un link rapido che ho trovato circa un anno fa sulla scrittura di un codice jquery migliore: link

Una cosa che ho trovato in un codice di un collega che stava uccidendo le prestazioni era la memorizzazione nella cache di dati che non avevano bisogno di essere memorizzati nella cache.

Esempio:

var table = $("#data").dataTable(.....);

DataTables è un plug-in jQuery che usiamo per creare delle belle griglie. Ad ogni modo, la tabella conteneva quasi 5k di righe, applicando il plug-in DataTables e quindi salvandolo nella variabile table effettivamente causato sia a FireFox che a IE per avvertire che uno script stava impiegando troppo tempo. Morale della trama, memorizza i dati solo se necessario.

Da quello che ho sentito for loops è computazionalmente più veloce di $.each() di jQuery.