11521 sujets

JavaScript, DOM et API Web HTML5

bonjour
IL existe plusieurs techniques d optimisation que ce soit pour le code css ou les images et javascript.
Pour javascript les techniques sont listéss ci dessous ;
-réunion des fichiers concat ou ici
-suppression des retours a la ligne et des espaces "minify" avec minify ou uglify
-compression avec gzip http protocole
-chargement des modules lors de l 'appel des widgets ( requirejs )
-utilisation de librairie plus légère : zepto ( optionnel module et jquery)
-non intégration du script si non utilisé comme dans modernizr ( builder ) , bootstrap(customize) .
-utilisation d un serveur CDN qui contient le fichier
-utiliser une libraire modulaire comme Mootool et pas jquery
-utiliser javascript raw ( un peu trop radical avec les incompatibilités entre navigateurs )
-choisir des librairies (knockout / , jquery/Jsview ) plutôt qu 'un framework (BackBone / angular)
-safe obfuscation pour réduire le nombre de caractères
-enlever dans le code source javascript les variables et fonctions non utlisés .

Deux points m intéresse ici : jquery et le derniers points :
a) jquery : est il possible par exemple du supprimer le code AJAX si AJAX n est pas utilisé ? J e n 'ai pas trouver d 'interface web pour customiser jquery
b) unsused js ( le code dans le fichier , pas tous le code dans le fichier ) . Cette technique ( utilisée par closure compiler) est elle mise en pratique couramment ? et si oui ;
b1) avec quels outils ?
b2) cette technique a t elle un intérêt après toutes les choix déjà possibles énoncés ?

Merci
Modifié par 75lionel (10 May 2016 - 06:59)
salut,

il faut savoir que certains points évoqués ne concernent pas l'optimisation JS à proprement parlé mais plutôt une optimisation des ressources et de leur poids ainsi que la façon dont elles seront servies. Utiliser par exemple un CDN me semble quand même de l'artillerie lourde (même si les libraires citées l'utilisent lorsqu'elles sont intégrées via le lien qu'elles proposent).

Après, réunir tous tes scripts en un seul et même fichier n'est pas toujours évident et parfois tu peux gérer ça différemment pour un tout aussi bon résultat.

Concernant l'obfuscation, ce n'est pas toujours une bonne idée. Cela peut provoquer des bugs inattendues et très franchement, pour le gain minime que ça offre, ça ne vaut pas plus le coup. Un passage par Closure Compiler et Gzip suffit amplement à mon sens.

Pour l'utilisation de javascript natif, je ne vois pas trop où est le problème. Les différences de compatibilité tendent à être de moins en moins flagrantes et une librairie n'égalera jamais les performances d'un code natif. Donc en fonction du projet, il faut voir...

Pour essayer de répondre à tes questions, tu peux chercher sur le net "JQuery builder" ou quelque chose dans ce sens. Il doit y avoir quelques liens qui pourraient te satisfaire.
Si non, je pense qu'avec Closure Compiler, tu gagnes déjà énormément vu qu'il fait tout le travail à ta place. Si en plus tu comprends comment il marche, tu peux toi aussi faire en sorte d'avoir un fichier final très léger et performant (parfois j'arrive à passer de 30Ko à 6Ko non Gzippé donc...)
vous aviez raison avec jquery builder mais je pensais que ces fonctionnalités etaient proposées par le site officiel de jquery et pas sur un autre site . Pour faire une analogie "css/js" le "builder npm config.json en sass " du framework bootstrap est sur leur site officiel bootstrap.

pour l obsfucation javais ajouté safe obfucation mais je ne sais pas si les outils permettent ce resultat dans tous les cas !!

Sinon que penser de l optimisation/convertion d un code commonjs ( serveur desktop) en un code compatible client web ( browserify) ? par exemple videojs supporte les deux techniques .


Merci pour les informations je vais approfondir tout ça : yuicompressor , closure compiler et
typescript ( ici ici)!
Modifié par 75lionel (10 May 2016 - 08:23)