skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

mardi 25 mai 2010

Raccourcir les chaînes d'objets en JavaScript

Publié par Infinite Loop, à 10 h 27 3 commentaires

Voici un petit truc que j'avais entendu parler et que j'ai testé pour constater qu'il est possible d'optimiser la performance du JavaScript si vous faites des chaînes d'objets du type :

window.document.forms.myForm.field
Chaque point dans la référence à l'objet nécessite une recherche pour accéder à sa partie. Si la chaîne est référencée plus d'une fois, on peut l'assigner à une variable qui pointera directement sur l'objet et qui permettra de réduire le nombre de recherches nécessaires.

Voici un petit test qui démontre le gain de performance :
var foo, start, end, executionTime;

/* Test 1 */
start = new Date().getTime();
for(var i=0 ; i<10000 ; i++){
foo = window.document.forms.myForm.field;
}

executionTime = new Date().getTime() - start;
console.log('Test 1 : %i', executionTime);

/* Test 2 */
var refForm = window.document.myForm;

start = new Date().getTime();
for(var i=0 ; i<10000 ; i++){
foo = refForm.field;
}

executionTime = new Date().getTime() - start;
console.log('Test 2 : %i', executionTime);

/* Test 3 */
var refElem = window.document.myForm.field;
start = new Date().getTime();

for(var i=0 ; i<10000 ; i++){
foo = refElem;
}

executionTime = new Date().getTime() - start;
console.log('Test 3 : %i', executionTime);
  • Le premier test utilise la notation longue à l'intérieur de la boucle de 10 000 itérations. Sans surprise, c'est le plus lent (44).
  • Le deuxième test retient la référence au formulaire et un seul test doit être effectué pour accéder à field. On note que la performance est grandement améliorée (8).
  • Le troisième test conserve la référence directe à field donc plus aucune recherche n'est nécessaire. C'est quasi instantané (1).
Les résultats affichés dans Firebug :


Tags: JavaScript

3 réponses à "Raccourcir les chaînes d'objets en JavaScript"

  1. jeg a dit...
    25 mai 2010 à 10 h 37

    Ca à l'air intéressant... Mais je me méfie de ce genre d'optimisation. Ca dépend complètement du moteur qui exécute le code JS.

    Est-ce que ce script a été testé dans d'autre navigateur IE, chrome ?

    Infinite Loop a dit...
    25 mai 2010 à 10 h 49

    Tu ne devrais pas t'en méfier. J'ai testé à l'instant avec FF3, IE8 et Chrome 4.

    Résultats des trois tests:

    FF 3.6.3 : 44 - 8 - 1
    IE 8 : 157 - 15 - 0
    Chrome 4.1 : 35 - 11 - 0

    jeg a dit...
    25 mai 2010 à 11 h 15

    Merci pour les tests !

    Je note les conseils et je le range dans un coin de ma tête pour le ressortir lors d'écriture de code JS.


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (55)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ▼  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ►  octobre 2010 (32)
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ▼  mai 2010 (36)
        • Buckethead et son chapeau PFK
        • Site de vente de mp3 usagés
        • Citation no. 84 sur les programmeurs
        • Microsoft compare IE6 à du lait périmé
        • Maison spéciale dans une colline en Suisse
        • Extraire les tags ID3 des mp3
        • Gaffe sous systèmes Unix / Linux
        • Marchés boursiers galactiques
        • Raccourcir les chaînes d'objets en JavaScript
        • Simulation de combat - Étape 4
        • Citation no. 83 sur la conception de logiciels
        • Journée presque parfaite, sans compromis
        • Partitions de guitare sous Linux
        • Maison en champignon à Toronto
        • Ce que devra faire Halak ce soir
        • Accordéon simple avec jQuery
        • Composer une chanson au téléphone
        • Investir dans ses connaissances
        • Simulation de combat - Étape 3
        • Citation no. 82 sur l'explication
        • Easter egg dans EA NHL 09
        • Mais qui a volé le pénis de Napoléon ?
        • Internationalisation i18n en programmation
        • Simulation de combat - Étape 2
        • Simulation de combat - Étape 1
        • C'est comme ça que ça doit être fait
        • Parc du Mont-Royal, dimanche PM
        • Citation no. 81 sur la noix de coco
        • Biographie de Mike Patton
        • Design Patterns, vous y comprenez quelque chose ?
        • Un mot pour les nerds
        • Hang, un instrument de musique atypique
        • Plugin autocomplete simple pour jQuery
        • Savoir reconnaître un manipulateur
        • Citation no. 80 sur le café
        • Empêcher un objet PHP d'être cloné
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (429)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (36)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft