web-dev-qa-db-fra.com

balises de script multiples versus simples

Existe-t-il une différence (performances, meilleures pratiques, etc.) entre l'utilisation d'une seule balise de script contenant du code incorporé ou l'utilisation de plusieurs balises de script avec le même code réparti dans le code HTML?

Par exemple:

<script>
    foo();
</script>
...
<script>
    bar();
</script>

contre:

<script>
    foo();
    bar();
</script>

Merci

javascripthtmlscript-tag
42
Assaf Shemesh

Avec un script inline similaire à ce que vous avez cité, il ne devrait pas y avoir de différence much; Cependant, chaque fois que l'analyseur HTML du navigateur rencontre une balise script, il:

  • S'arrête brutalement
  • Construit une chaîne du texte dans la balise jusqu'à la première fois qu'il voit la chaîne "</script>"
  • Envoie ce texte à l'interpréteur JavaScript, l'écoute de la sortie est envoyée par l'interprète lorsque vous effectuez un document.write
  • Attend la fin de l'interprète
  • Insère la sortie accumulée reçue dans le flux d'analyse
  • Continue son analyse

Donc, augmenter le nombre de fois que cette séquence doit se produire peut, en théorie, augmenter le temps de chargement de votre page. Cela affecte également la mesure dans laquelle l'analyseur peut "anticiper" dans le flux de jetons, ce qui peut le rendre moins efficace.

Tout cela semble vraiment dramatique, mais il vous faudrait profiler une vraie page dans les différents navigateurs qui vous intéressent pour déterminer si elle a un impact réel.

Donc, en résumé, combinez-les autant que vous le pouvez raisonnablement. Si vous ne pouvez pas raisonnablement combiner un couple, ne vous inquiétez pas trop jusqu'à ce que/à moins que vous ne voyiez un problème réel.

Ce qui précède est pour le script en ligne. Naturellement, si vous avez plusieurs balises script faisant référence à un ensemble de fichiers JavaScript externes, vous aurez également le problème que chacun de ces fichiers doit être téléchargé, et le lancement d'une requête HTTP est une opération coûteuse (comparativement), et il vaut donc mieux , en gros, pour les combiner dans un seul fichier.

Quelques autres points à considérer:

  • Avoir beaucoup de balises script dispersées dans votre code HTML peut rendre difficile la maintenance du script.
  • Séparer votre HTML et votre script en plusieurs fichiers vous aide à limiter le degré de couplage, ce qui facilite la maintenance.
  • Le fait de placer le script dans un fichier séparé permet de l'exécuter par le biais de minifiers/compressors/packers, en réduisant la taille de votre code et en supprimant les commentaires, vous permettant ainsi de commenter dans votre code source, sachant que ces commentaires seront privés.
  • Le fait de placer vos scripts dans des fichiers externes vous permet de garder les éléments séparés par des fonctionnalités, puis de les combiner dans un seul fichier pour la page (compressée/réduite/compactée) pour une diffusion efficace dans le navigateur.

Plus:

41
T.J. Crowder

Combiner vos scripts autant que possible est préférable à mon avis. Certains navigateurs doivent suspendre le rendu lors de l'exécution de blocs de script. Consultez la réponse à l'adresse: Javascript Performance: plusieurs blocs de script par rapport à un bloc plus important

2
Babiker

Jusqu'à ce stade, tout le code JavaScript était dans une seule balise, ce n'est pas nécessairement le cas.

Vous pouvez avoir autant de balises que vous le souhaitez dans un document.

Les balises sont traitées dès qu’elles sont rencontrées.

J'espère que cela t'aides.

2
user812254

Certains estiment qu'il est préférable de combiner tous les scripts dans un seul bloc de script ou un seul fichier de script, de ne charger que le javascript réellement nécessaire et de le charger le plus tard possible pour ne pas ralentir le rendu du code HTML.

En dehors de cela, je suis sûr que l'utilisation d'un seul bloc de script se charge plus rapidement que d'utiliser plusieurs blocs de script, car ils doivent être évalués individuellement. Cependant, cette différence pourrait ne pas être reconnaissable.

0
Till