Erreurs Javascript courantes qui affectent gravement les performances? [fermé]

Lors d'un récent Meetup UI / UX auquel j'ai assisté, j'ai donné quelques commentaires sur un site Web qui utilisait Javascript (jQuery) pour son interaction et son interface utilisateur - il s'agissait d'animations et de manipulations assez simples, mais les performances sur un ordinateur décent étaient horribles.

Cela m'a en fait rappelé de nombreux sites / programmes que j'ai vus avec le même problème, où certaines actions détruisent absolument les performances. C'est principalement dans (ou du moins plus visible dans) des situations où Javascript sert presque de remplacement Flash. C'est en contraste frappant avec certaines des applications Web que j'ai utilisées qui ont beaucoup plus de Javascript et de fonctionnalités mais fonctionnent très bien (COGNOS by IBM est celui auquel je peux penser du haut de ma tête).

J'adorerais connaître certains des problèmes courants qui ne sont pas pris en compte lors du développement de JS, ce qui tuera les performances du site.

Un tueur de performances commun appelle .lengthune HTMLCollection dans une forboucle:

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

Cet anti-modèle entraîne le calcul de la taille de la collection à chaque passage dans la boucle. La meilleure approche consiste à calculer la longueur en dehors de la boucle:

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

Non, le problème ne vient pas de JS utilisé comme remplacement flash. Si vous n'êtes pas convaincu de cela, documentez-vous sur actionscript: il est très proche de JS.

En tant que tueur de performances, vous pouvez trouver plusieurs mauvaises pratiques:

• Attachez un gestionnaire d'événements à un événement continu, comme le défilement, le déplacement de la souris ou d'autres éléments similaires. Cela a 2 inconvénients: si l'événement n'est pas suffisamment déclenché, votre application ne sera pas réactive. S'il est trop déclenché, vous aurez une énorme charge CPU pour rien.
• Passer des appels AJAX synchrones. Javascript n'est pas multithread, alors, quand une partie de JS attend quelque chose, votre application est gelée. Il vaut mieux utiliser les appels AJAX asynchrones et utiliser de la même manière setTimeout / setInterval pour diviser une longue phase de calcul et garder votre application réactive.
• Complexité d'algorithme élevée comme dans tous les autres langages.

J'ai donné quelques commentaires sur un site Web qui utilisait Javascript (jQuery) pour son interaction et son interface utilisateur - c'était des animations et une manipulation assez simples, mais les performances sur un ordinateur décent étaient horribles.

Le plus gros problème avec les performances est d'utiliser des abstractions de haut niveau (comme jQuery) sans comprendre le modèle DOM sous-jacent et le modèle d'animation CSS3 (ou canvas, ou svg).

Si vous ne savez pas comment le faire sans les abstractions, vous n'avez aucune connaissance absolue des techniques rapides ou lentes.

Apprenez JavaScript, apprenez le DOM. Une fois que vous connaissez ces deux et que vous savez ce que font vos abstractions sous le capot, vous pouvez les utiliser efficacement. Bien sûr, la plupart du temps, vous réalisez que l'abstraction consiste à ralentir et à le faire manuellement sans bibliothèque.

La beauté et l'inconvénient de Javascript est qu'il est extrêmement flexible. Cela étant dit, cela vous permet en fait de faire des choses que vous ne devriez probablement pas faire dans de nombreux cas.

D'après les révisions de code auxquelles j'ai participé, les principales préoccupations ont tendance à être liées au rendu CSS. Pour les nouveaux développeurs JS, nous avons tendance à voir beaucoup trop de variables utilisées dans la portée globale.

De plus, des fermetures incorrectes peuvent souvent provoquer des fuites de mémoire. Cependant, la plupart des frameworks Javascript modernes empêchent ce genre de problèmes tant que votre code suit le framework.

Voici un lien rapide que j'ai trouvé il y a un an environ pour écrire un meilleur code jquery: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance /

Une chose que je viens de découvrir dans un code de collègues qui détruisait les performances était la mise en cache des données qui n'avaient pas besoin d'être mises en cache.

Exemple:

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

DataTables est un plug-in jQuery que nous utilisons pour créer de belles grilles. Quoi qu'il en soit, la table contenait près de 5 000 lignes, en appliquant le plug-in DataTables puis en l'enregistrant dans la variable de table, FireFox et IE ont en fait averti qu'un script prenait trop de temps. Morale de l'histoire, ne cachez les données que si vous en avez besoin.

D'après ce que j'ai entendu, les forboucles sont plus rapides que celles de jQuery $.each().