Extrême optimisation JavaScript

Original: http://www.phpied.com/extreme-javascript-optimization/


20 décembre 2009. 
mise à jour 2010 :
20 Dec cet article fait partie de l’expérience de calendrier AVENT 2009 performance. L’article d’aujourd’hui est une deuxième contribution de Ara Pehlivanian (ici est le premier).

Ara Pehlivanian

Ara PehlivanianAra Pehlivanian travaille depuis 1997 sur le Web. Il a été pigiste, un webmaster et plus récemment, un ingénieur avant de fin à l’expérience de Yahoo! Ara vient d’avoir travaillé sur tous les aspects du développement web tout au long de sa carrière, mais il suit maintenant sa passion pour le développement front-end basée sur les standards web. Lorsqu’il n’est pas parler et écrire sur les meilleures pratiques ou codage professionnellement, il est Twitter comme @ara_p ou maintenir son site personnel à http://arapehlivanian.com/.
Il y a un phénomène étrange en cours dans le monde de JavaScript aujourd’hui. Si la langue est demeurée relativement stable depuis une dizaine, il y a une évolution envisagée parmi ses programmeurs. Ils utilisent la même langue qui nous a apporté défilement texte barre d’État pour écrire des applications clientes quelque devoir assez lourd. Bien que cela puisse paraître comme nous entrons dans une Lada dans une course de F1, en réalité, nous avons passé les dix dernières années, conduire une voiture de course de F1 en arrière dans l’allée. Nous utilisions jamais la langue à son plein potentiel. Il a fallu la découverte d’Ajax pour nous lancer de l’allée et sur la piste de course. Mais maintenant que nous sommes sur la piste, il y a beaucoup de souligné en rouge et rectification des engrenages en cours. Très peu de gens, semble-t-il, savoir conduire une voiture de course de F1. Du moins pas à 250 mph.
La chose de c’est, c’est assez facile de mettre votre pied au plancher et obtenez jusqu’à 60 km/h. Mais très bientôt, vous aurez à changer de vitesse si vous voulez éviter le broyage à une halte. C’est la même chose avec l’écriture de grandes applications côté client en JavaScript. Processeurs rapides nous donnent l’impression que nous pouvons faire n’importe quoi et sortir avec elle. Et pour les petits programmes, il est vrai. Mais écrire beaucoup de mauvais JavaScript pouvez obtenir très rapidement dans des situations votre code commence à ramper. Si juste comme un conducteur moyen a besoin d’une formation pour conduire une voiture de course, nous avons besoin de maîtriser les tenants et les aboutissants de cette langue si nous voulons faire fonctionner sans à-coup dans les applications à grande échelle.
Variables
Nous allons jeter un oeil à l’une des agrafes de programmation, la variable.Certaines langues nécessitent que vous déclarez vos variables avant de les utiliser, n’est pas JavaScript. Mais simplement parce que ce n’est pas nécessaire ne signifie pas que vous ne devriez pas le faire. C’est parce qu’en JavaScript si une variable n’est pas déclarée explicitement en utilisant le mot clé « var », il a considéré comme un mondial et globals sont lents. Pourquoi ? Parce que l’interprète doit figurer dehors si et au cas où la variable en question a été initialement déclarée, donc il va chercher pour lui. Prenons l’exemple suivant.
function doSomething(val) {
    count += val;
};

Comte a-t-elle une valeur est assignée à hors de la portée de doSomething ? Ou est il tout simplement pas être déclaré correctement ? Aussi, dans un vaste programme, ayant des noms de variable globales génériques rend difficile de garder les collisions se produisent.
Boucles
La recherche de la chaîne de portée pour le comte est déclarée dans l’exemple ci-dessus n’est pas une grosse affaire si cela arrive une fois. Mais dans les applications web à grande échelle, pas grand chose arrive juste une fois. Surtout quand il sont inquiètent de boucles. La première chose à retenir sur boucles et ce n’est pas juste pour JavaScript, est de faire autant de travail à l’extérieur de la boucle que possible. Moins vous faites dans la boucle, votre boucle sera plus vite. Qu’étant dit, nous allons jeter un oeil à la pratique la plus courante en JavaScript boucles qui peuvent être évités. Jetez un oeil à l’exemple suivant et voyez si vous pouvez repérer il :
for (var i = 0; i < arr.length; i++) {
    // some code here
}


Avez-vous vu il ? La longueur de la tableau arr est recalculée chaque fois que l’itération de la boucle. Une solution simple pour cela est de mettre en cache la longueur du tableau comme suit :
for (var i = 0, len = arr.length; i < len; i++) {
    // some code here
}
De cette façon, la longueur du tableau est calculée une seule fois et la boucle se réfère à la valeur mise en cache chaque fois qu’elle effectue une itération.
Alors quoi d’autre pouvons-nous faire pour améliorer les performances de la boucle ? Eh bien, quel autre travaux sont effectués sur chaque itération ? Eh bien, nous allons évaluer si la valeur d’i est inférieure à la valeur de len et nous sommes également j’ai augmenter i par un. Pouvons-nous réduire le nombre d’opérations ici ? Nous pouvons si l’ordre dans lequel notre boucle est exécutée n’est pas grave.
for (var i = 100; i--; ) {
    // some code here
}


Cette boucle s’exécutera 50 % plus rapide que celui ci-dessus parce qu’à chaque itération, il simplement soustrait une valeur d’i, et étant donné que cette valeur n’est pas “rencontre”, en d’autres termes il n’est pas 0, puis la boucle s’allume. Au moment où la valeur de frappe de 0, la boucle s’arrête.
Vous pouvez le faire avec d’autres types de boucles aussi bien :
while (i--) {
    // some code here
}


Encore une fois, parce que l’évaluation et l’exploitation de la soustraction 1 d’après j’ai fait en même temps, tout en besoins de boucle est pour j’être rencontre, ou 0 et la boucle seront fermera.
La mise en cache
J’ai abordé brièvement la mise en cache plus haut lorsque nous avons mis en cache de la longueur du tableau dans une variable. Le même principe peut être appliqué en de nombreux endroits dans le code JavaScript. Essentiellement, ce que nous voulons éviter de faire envoie l’interprète pour faire le travail inutile une fois qu’il a déjà fait une fois. Ainsi, par exemple, lorsqu’il s’agit de l’analyse de la chaîne de portée pour trouver une variable globale pour nous, la mise en cache, il la référence localement sauvera l’interprète d’elle aller chercher chaque fois. Ici, permettez-moi d’illustrer :
var aGlobalVar = 1;
 
function doSomething(val) {
    var i = 1000, agv = aGlobalVar;
    while (i--) {
        agv += val;
    };
    aGlobalVar = agv;
};
 
doSomething(10);


Dans cet exemple, aGlobalVar est extraite seulement deux fois, pas plus d’un mille fois. Nous extrayons une fois pour obtenir sa valeur, puis nous allons à nouveau pour définir sa nouvelle valeur. Si nous avions utilisé il à l’intérieur le tout en boucle, l’interprète serait ont sorti pour aller chercher cette variable mille fois. En effet, la boucle ci-dessus prend environ 3 ms à courir alors que si avg += val ; ont été remplacés par aGlobalVar += val ; puis la boucle prendrait environ 10ms à exécuter.
Profondeur de la propriété
L’imbrication d’objets afin d’utiliser la notation par points est une excellente façon d’espace de noms et d’organiser votre code. Unforutnately, quand il s’agit de performance, cela peut être un petit problème. Chaque fois qu’une valeur est accessible dans ce type de scénario, l’interprète doit parcourir les objets que vous avez imbriqué afin d’obtenir cette valeur. Plus la valeur, le parcours plus, plus l’attente. Ainsi, même si l’espace de nommage est un excellent outil d’organisation, garder les choses aussi peu profonds que possible est votre meilleur pari à accélérer les performances. La dernière incarnation de la bibliothèque de YUI évolué pour éliminer une couche entière de l’imbrication de son espace de nommage. Ainsi, par exemple, YAHOO.util.Anim est maintenant Y.Anim.
Résumé
Voici quelques exemples de la façon d’améliorer les performances de votre code en faisant attention à comment l’interpréteur JavaScript fait son travail. N’oubliez pas cependant que les navigateurs sont en constante évolution, même si la langue n’est pas. Ainsi, par exemple, les navigateurs d’aujourd’hui mettent en place les compilateurs JIT pour accélérer les performances. Mais qui ne signifie pas que nous devrions être moins vigilants dans nos pratiques. Parce qu’en fin de compte, lorsque votre application web est un énorme succès et que le monde regarde, chaque milliseconde compte.

Comments are closed.