Bonjour,
 
 
Je cherche à optimiser du code Javascript qui a été commencé par un développeur, puis est passé de mains en mains, pour finir entre les miennes. Je suppose donc qu'il est très perfectible.
 
1) Vaut-il mieux stocker la référence d'un élément HTML dans une variable et utiliser cette variable, ou peut-on rechercher cet élément à chaque fois qu'on a besoin de le manipuler ?
 
2) Quelle taille doit faire un fichier JS ? Et d'ailleurs cette notion de taille est-elle importante alors que je vois un peu partout qu'il est préférable de réunir plusieurs JS pour limiter les requêtes (et donc augmenter la taille de l'unique JS) ? J'ai deux ou trois fichiers qui montent à 3000 lignes et une dizaine d'autres qui varient entre 5 et 800 lignes chacun.
 
 
Merci.

1) Stocker bien sur, la recherche sur le DOM est très lente.
 
2) La taille à une importance relativement faible, pour gagner en place, sur la production, tu peux compresser en faisant appel par exemple à uglifyjs. Ca permet de transférer moins d'octet (donc chargement de la page plus rapide), et la performance reste a peu près au même niveau (c'est souvent négligeable comme différence).
 
3) Si tu souhaites vraiment aller au bout de choses, sache qu'un langage interprété est performant... Lorsqu'il se comporte comme un language compilé.
En particulier, lorsque les variables ne changent pas de type, le retour des fonctions non plus, c'est dans ces cas là que la performance sera maximale.
 
4) Tu peux faire un tour du côté des profilers (celui de chrome, de firefox) pour voir un bout de code "en live" ce qu'il donne, quelles fonctions sont a optimisées au non.
 
 
Have fun.

la recherche par id est a peut prêt gratuite. le reste va de couteux a très couteux,.Dans tous les cas, il vaut mieux stocker.
 
Pour le dev: des fichiers courts, avec des rôles précis simplifient les choses.Pour la prod, un seul js limite les requêtes et optimise la cmopression. Des outils existent pour passer de l'un à l'autre

Merci pour ces infos. En fait le site est blindé de web services parce que c'est le front-end d'un logiciel plus important tournant sur nos propres serveurs.
 
Il n'y a jamais eu de problèmes de lenteur ou autres, mais certains utilisateurs commencent à l'utiliser en 4G avec des ordis portables (il est normalement fait pour être utilisé en bureautique uniquement, il est même pas responsive).
 
Et apparemment ils ont des déconnexions aléatoires au chargement de la page ou lors d'appels à des web services (uniquement les utilisateurs 4G). Les erreurs concernent toujours un des fichiers JS.

Alors tu les assembles, tu les minifie ( virer les espace, renommer les variables) avec un truc genre uglifyjs2
Tu paramètre ton serveur web pour obliger les navigateurs a le mettre en cache+ compression gzip au maxi

OK merci, je pense que je vais devoir un peu refondre le truc

En 1/ force la mise en cache : c'est un paramétrage de ton serveur , facile a mettre en place si tu as la main dessus

OK je ferai ça en priorité, merci.

Attention , la contrepartie est que le jour ou tu mets  àjours tes fichiers js, il peut y avoir quelques soucis pour etre sur que la mise à jour descende
 
regarde du côté des etags

Faut que les JS descendent les étages  

Sinon j'ai vu que les fichiers js étaient inclus de cette manière dans le HTML :
 

 
Le rajout ?version=120114, qui évidemment ne figure pas dans le nom du fichier, sert à quoi exactement ? C'est pas une histoire d'expiration de cache ?
 
Merci.

On peut récup ce paramètre, mais effectivement la large majorité des cas c'est pour invalider le cache (surtout des users une fois le passage en prod).

Mais y a un traitement autre que simplement rajouter cette extension ? Ou c'est automatiquement géré par les navigateurs ? Et donc on met la date de la dernière modif ?

Tu incrémentes comme tu veux, pour le navigateur il voit ça comme un autre fichier donc il le ré-telecharges (ça marche aussi pour les imegs, les css, etc.).
 
Tu peux faire un ?nocache=<?=filemtime($path_vers_ton_fichier)?> mais comme tous les accès disques sont un peu couteux en terme de perf, si tu peux incrémenter à la main a chaque modif du fichier, c'est mieux...

Ah oui OK ça sert juste à changer le nom du fichier pour qu'il le retélécharge. Merci.
 
PS : je suis pas en PHP

Tu fais gérer ça par le serveur http://fr.wikipedia.org/wiki/Balis [...] _ETag_HTTP