Optimiser et structurer son code JavaScript

 Article modifié dernièrement le 18 Juil 2011 @ 0 h 42 min

Placement

Nous voyons un peu partout des recommandations de la part des grands comme Yahoo! par exemple avec son « Best practices for Speeding Up Your Web Site » sur le fait qu’ il est préférable d’insérer son code javascript à la fin d’une page plutôt que dans l’entête de celle-ci pour éviter de bloquer le téléchargement parallèle des composants de la page (car les scripts javascript sont la plupart du temps utiles une fois la page chargée mais rarement avant).

Voici donc en gros ce qu’il est préférable de faire :
avant

après

Visibilité et légèreté

Deux autres recommandations sur le JavaScript sortent du lot et sont importantes à mes yeux :

  1. Minimiser le nombre de fichiers JavaScript à inclure dans vos pages
  2. Réduire la taille des fichiers JavaScript à l’aide d’outils comme JSmin (ça les rend quasi illisibles ensuite)

Généralement un site web utilise beaucoup de scripts JavaScript provenant de frameworks comme Ext-JS, Prototype, jQuery ou MooTools mais aussi beaucoup de scripts propre à l’application qui permettent de définir le comportement des pages et les actions utilisateurs.

Voici la façon que j’utilise depuis peu pour minimiser le nombre de fichiers JavaScript selon l’environnement et la façon de les importer (à placer juste avant le </body> de votre page) :

Structure

Dans l’exemple ci-dessus, nous voyons que 4 fichiers sont utilisés pour notre application et injectés dans notre page (application-main, application-browser, application-menu, application-imageZoom), voici un moyen de regrouper les fonctionnalités de chacun dans un unique fichier.

Ce nouveau fichier crée un objet global JavaScript nommé App (pour Application) qui permet de définir les constantes, les méthodes et les sous objets (App.Browser, App.Menu …) afin que l’ensemble de vos petits scripts soient réunis dans un unique fichier en gardant un découpage fort.

Voici un court extrait, tiré de mon projet personnel en cours de réalisation :

Les actions qui doivent être exécutés après le chargement complet de la page se font à présent en appelant la méthode init() de mon objet App :

Conclusion

Je serai curieux de connaître votre façon de faire, que pensez-vous de celle-ci ? peut-on l’optimiser plus ?

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

  • Greg 1 avril 2010, 13 01

    Ca a l’air vraiment bien tes astuces, j’espère que les gens vont donner leurs trucs et astuces à la suite..
    PS : C’est quand tu me reprogrammes complètement mon blog de A à Z ??? 😀 😀

  • Mimie 1 avril 2010, 13 01

    Quand mes journées feront 48h au lieu de 24h … 😀

  • Greg 1 avril 2010, 13 01

    Arf.. c’est pas gagné

  • Francis Levasseur 21 juin 2011, 17 05

    Bonjour, très bon code!

    personnellement, je préfères minifier mon js à l’aide de php-jsmin (compilé comme un module de php5). je me suis créé un fichier php qui charge le contenu de tous mes js, les minifie puis me retourne le tout en texte.
    j’ai également la possibilité de mettre en cache le résultat pour économiser mon serveur ^^
    puis je n’ai plus qu’a appeler mon script avec la balise script standard.

    ça me permet de travailler mon js n’importe quand, je n’ai pas à me casser les coui**es a minifier mon code a chaque changement.

    Francis

Article suivant:

Article précédent:

Share This