web-dev-qa-db-fra.com

La position de la balise <script> en HTML affecte-t-elle les performances de la page Web?

Si la balise de script est au-dessus ou au-dessous du corps d'une page HTML, est-ce important pour les performances d'un site Web?

Et si utilisé entre les deux comme ceci:

<body>
..blah..blah..
<script language="JavaScript" src="JS_File_100_KiloBytes">
function f1() {
.. some logic reqd. for manipulating contents in a webpage
}
</script>
... some text here too ...
</body>

Ou est-ce mieux?:

<script language="JavaScript" src="JS_File_100_KiloBytes">
function f1() {
.. some logic reqd. for manipulating contents in a webpage
}
</script>
<body>
..blah..blah..
..call above functions on some events like onclick,onfocus,etc..
</body>

Ou celui-ci?:

  <body>
    ..blah..blah..
    ..call above functions on some events like onclick,onfocus,etc..
<script language="JavaScript" src="JS_File_100_KiloBytes">
    function f1() {
    .. some logic reqd. for manipulating contents in a webpage
    }
    </script>
    </body>

Inutile de dire que tout est à nouveau dans le <html> tag !!

Comment cela affecte-t-il les performances de la page Web lors du chargement? Est-ce vraiment le cas? Lequel est le meilleur, que ce soit parmi ces 3 ou un autre que vous connaissez?

Et encore une chose, j'ai googlé un peu à ce sujet, à partir duquel je suis allé ici: Meilleures pratiques pour accélérer votre site Web et il suggère mettez les scripts en bas , mais traditionnellement, beaucoup de gens l'ont mis dans <head> tag qui est au-dessus du <body> tag. Je sais que ce n'est PAS une règle, mais beaucoup le préfèrent de cette façon. Si vous n'y croyez pas, il suffit de voir la source de cette page! Et dites-moi quel est le meilleur style pour de meilleures performances.

javascripthtmlperformanceoptimization
64
Pratik

Les actifs Javascript, par défaut, ont tendance à bloquer tout autre téléchargement parallèle. Donc, vous pouvez imaginer si vous avez beaucoup de <script> balises dans la tête, appelant plusieurs scripts externes bloquera le chargement de HTML, saluant ainsi l'utilisateur avec un écran blanc vierge, car aucun autre contenu de votre page ne chargera jusqu'à les fichiers JS sont complètement chargés.

Afin de lutter contre ce problème, de nombreux développeurs ont choisi de placer JS en bas de la page HTML (avant le </body> tag). Cela semble logique car, la plupart du temps, JS n'est pas requis jusqu'à ce que l'utilisateur commence à interagir avec le site. Le placement des fichiers JS en bas permet également un rendu progressif.

Vous pouvez également choisir de charger les fichiers Javascript de manière asynchrone. Il existe de nombreuses méthodes existantes qui peuvent être accomplies en:

XHR Eval 

var xhrObj = getXHRObject();
xhrObj.onreadystatechange = 
  function() { 
    if ( xhrObj.readyState != 4 ) return;
    eval(xhrObj.responseText);
  };
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');

Élément DOM de script 

var se = document.createElement('script');
se.src = 'http://anydomain.com/A.js';
document.getElementsByTagName('head')
[0].appendChild(se);

Meebo Iframed JS 

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
doc.open().write('<body onload="insertJS()">');
doc.close();

Pour n'en nommer que quelques-uns ...

Remarque : Seul un maximum de cinq scripts peuvent être chargés en parallèle dans les navigateurs actuels.

Pour IE il y a l'attribut defer que vous pouvez utiliser comme ceci:

<script defer src="jsasset.js" type="text/javascript"></script>

Lorsqu'il est défini, cet attribut booléen indique à l'agent utilisateur que le script ne générera aucun contenu de document (par exemple, pas de "document.write" en javascript) et ainsi, l'agent utilisateur peut continuer l'analyse et le rendu.

67
Russell Dias

Je sais donc que c'est une vieille discussion, mais j'ai lu sur ce sujet et lu d'autres réponses sur StackOverflow ...

Peu importe où vous placez la balise jQuery:

Enfin, un mot sur le folklore persistant. Vous avez peut-être rencontré le conseil fréquemment répété de "toujours placer JavaScript en bas de la page juste avant la balise de fermeture". C'était une fois vrai parce que les navigateurs Web chargeaient les scripts de manière séquentielle et bloquaient le chargement et le rendu jusqu'à ce que chaque script soit terminé. Ce n'est plus vrai; les navigateurs modernes effectuent une "analyse de préchargement" et commencent à charger tous les scripts en parallèle, qu'ils soient répertoriés dans l'élément head ou au bas de la page. Le JavaScript externe est souvent chargé de manière asynchrone et écrit de sorte qu'il ne s'exécutera pas tant que la page n'est pas chargée et que le DOM n'est pas prêt. Charger un script dans l'élément head n'est plus une mauvaise pratique.

http://railsapps.github.io/Rails-javascript-include-external.html

24
reectrix

Les éléments de script en haut du document sont disponibles plus tôt (vous pouvez donc lier les gestionnaires d'événements et exécuter JS dès qu'un élément devient disponible), mais ils bloquent l'analyse syntaxique du reste de la page.

Les éléments de script en bas ne le sont pas (donc vous ne pouvez pas) et il n'y a plus de page importante, donc peu importe si elle est bloquée.

Quel est le meilleur dépend de la relative importance priorité (qui doit être déterminée au cas par cas) d'avoir JS exécutant Vs. ayant le rendu HTML.

Notez qu'un élément de script en bas doit apparaître à l'intérieur l'élément body. Il devrait donc être:

<script>...</script></body></html>

et pas

</body><script>...</script></html>
16
Quentin

Oui, cela affecte les performances de la page Web.

Le problème avec JavaScript est qu'il bloque l'exécution/le chargement du reste de la page. Si vous avez quelque chose qui prend beaucoup de temps dans votre JavaScript, cela empêchera le reste de la page de se charger:

Voir ces exemples:

Vous pouvez voir l'effet de l'alerte sur le rendu du reste de la page. Tout JavaScript que vous mettez en haut de votre page aura le même effet. En général, il est préférable de mettre quelque chose de critique dans la mise en page de votre page (c'est-à-dire des plugins de menu ou quelque chose). Tout ce qui nécessite une interaction de l'utilisateur (gestionnaires de fenêtres contextuelles) ou n'implique pas du tout l'utilisateur (Google Analytics) doit aller au bas de la page.

Vous pouvez obtenir des chargeurs paresseux qui injecteront vos balises script dans votre code. Étant donné que le code n'est pas sur le HTML, vous pouvez être sûr que votre page entière s'est rendue correctement et que le JS que vous incluez ne bloquera rien.

11
Jonathon Bolster

Oui, cela affecte les performances de chargement de la page Web.

Le problème est, normal <script> les balises se bloquent donc tout après la balise de script doit attendre que la balise de script soit chargée et analysée avant que le reste de la page puisse se charger.

Maintenant, quelqu'un remarquera probablement que si vous utilisez async="true" dans votre balise de script, il ne se bloquera pas. Mais cela n'est encore pris en charge que par quelques navigateurs, ce qui n'aidera pas encore le cas général.

Quoi qu'il en soit, en général, c'est une bonne idée de placer vos balises de script au bas de la page afin qu'elles ne retiennent pas les autres parties de la page.

5
Wolph

Premièrement, les balises de script qui ne se trouvent pas à l'intérieur des éléments body/head créent un code HTML non valide et peuvent même provoquer des exceptions dans certains navigateurs.

Les balises de script à l'intérieur de l'élément head seront chargées et interprétées avant tout rendu HTML, ce qui bloque le rendu HTML/CSS.

Les balises de script au bas de la balise body ne bloqueront pas HTML/CSS et comme vous ne pouvez jouer qu'avec le DOM sur DomReady, c'est la meilleure position pour mettre votre JavaScript. En remarque, vous n'aurez même pas besoin d'utiliser un wrapper d'événement domReady.

Alternativement, vous pouvez également utiliser des bibliothèques comme LABJS et RequireJS pour lancer votre JavaScript à partir de la balise head (blocage HTML/CSS minimal) . Tous les scripts chargés via l'une de ces bibliothèques s'exécuteront en parallèle avec le rendu HTML/CSS.

<head>
   <script data-main="INITSCRIPT.js" src="require.js"></script>
</head>

INITSCRIPT.js

require( [ "jQuery" , "somePlugin" ] , function(){
   $(document).ready(function(){
      $("#someId").somePlugin();   
   });
} );

Dans l'exemple ci-dessus, seules la charge et l'interprétation de require.js bloqueront le rendu HTML/CSS, ce qui est généralement insignifiant. Après quoi jQuery et somePlugin seront chargés en parallèle, donc HTML/CSS restitue bien.

4
BGerrissen

Les performances du script lui-même seront certainement les mêmes.

Le placement est cependant important, comme expliqué dans l'article que vous avez lié, car le navigateur "interrompt" (ou "gèle") les téléchargements et le rendu simultanés de la page lorsqu'il rencontre et charge le contenu d'un <script> tag. Il est donc préférable de laisser le navigateur rendre la page et d'appliquer les styles CSS, et alors d'inclure votre .js. Cela paraîtra plus fluide à l'utilisateur.

De plus, l'inclusion du script en bas signifie probablement juste avant de fermer le <body> tag.

1
Gipsy King