65 votes

Est-ce que le <script> tag position in HTML affects performance of the webpage?

Si la balise script est au-dessus ou au-dessous du corps dans une page HTML, est-il 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> 

N'a pas besoin de dire tout ce qui est nouveau dans l' <html> tag!!

Comment est-il affecter les performances de la page web lors du chargement? Est-il vraiment? Qui est le meilleur, que ce soit de ces 3 ou certains autres qui, vous le savez?

Et encore une chose, j'ai googlé un peu sur ce, à partir de laquelle je suis allé ici: les Meilleures Pratiques pour accélérer Votre Site Web et il suggère de mettre les scripts en bas, mais traditionnellement, beaucoup de gens mettent en <head> balise qui est au-dessus de l' <body> balise. Je sais que c'est PAS une règle, mais beaucoup préfèrent cette façon. Si vous ne croyez pas, il suffit de voir la source de cette page! Et dites-moi quel est le meilleur style pour de meilleures performances.

67voto

Russell Dias Points 17162

Javascript actifs, par défaut, ont tendance à bloquer tous les autres téléchargements en parallèle de se produire. Donc, vous pouvez imaginer si vous avez beaucoup d' <script> tags dans la tête, appelant plusieurs scripts externes va bloquer l' HTML de chargement, donc saluer l'utilisateur avec un écran blanc vide, parce que pas d'autre contenu sur votre page se charge jusqu'à ce que le JS fichiers ont complètement chargé.

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

Alternativement, vous pouvez choisir de charger les fichiers Javascript de manière asynchrone. Il ya beaucoup de méthodes existantes qui cela peut être effectué par:

XHR Eval

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

Script Élément du DOM

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 unes...

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


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

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

Lorsqu'il est activé, cet attribut booléen fournit un indicateur de l'agent utilisateur le script ne va pas générer tout le contenu du document (par exemple, pas de "le document.écrire" en javascript) et ainsi, l'agent utilisateur peut continuer d'analyse et de rendu.

25voto

smilingcow Points 95

Donc, je sais que c'est un vieux débat, mais j'ai lu sur ce sujet et en lisant d'autres réponses sur StackOverflow...

Il ne fait pas d'importance où vous avez mis le jQuery tag plus:

Enfin, un mot sur la persistante du folklore. Vous avez peut-être rencontré l'fréquemment répétées des conseils pour "toujours lieu JavaScript à l' en bas de la page, juste avant la balise de fermeture". C'était une fois vrai parce que les navigateurs web les scripts chargés de façon séquentielle et bloqué le chargement et le rendu jusqu'à ce que chaque script est terminé. Ce n'est pas plus vrai; les navigateurs modernes n' "précharge de numérisation" et commencer à charger tous les scripts en parallèle, si répertoriés dans l'élément de tête ou à la en bas de la page. JavaScript externe est souvent chargé de manière asynchrone et il est écrit de manière à ne pas exécuter jusqu'à ce que la page est chargée et l' DOM est prêt. Chargement d'un script dans l'élément de tête n'est plus qu'un mauvais de pratique.

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

16voto

Quentin Points 325526

Les éléments de Script en haut de ce document sont disponibles plus rapidement (de sorte que vous pouvez lier des gestionnaires d'événement et ont JS exécuter dès qu'un élément devient disponible), mais ils ne bloquent l'analyse du reste de la page.

Les éléments de Script au fond ne le sont pas (donc vous ne pouvez pas) et il n'y a pas de page à gauche, de sorte qu'il n'a pas d'importance si c'est bloqué.

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

Note qu'un élément de script au fond doit apparaître à l'intérieur de l'élément body. Il devrait donc être:

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

et pas

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

11voto

Jonathon Bolster Points 8663

Oui, elle n'affecte pas la performance de la page web.

Le problème avec le JavaScript est qui est bloque l'exécution/le chargement du reste de la page. Si vous avez quelque chose qui prend beaucoup de temps dans votre JavaScript, alors il sera de prévenir le reste de la page de chargement:

Voir les exemples suivants:

Vous pouvez voir l'effet que l'alerte a sur le rendu de la reste de la page. Le code JavaScript que vous avez mis en haut de votre page aura le même effet. En général, il est préférable de mettre tout ce qui est critique pour la mise en page de votre page (c'est à dire le menu des plugins ou quelque chose). Tout ce qui nécessite une interaction de l'utilisateur (popup gestionnaires), ou de ne pas impliquer l'utilisateur (Google Analytics) devrait aller tout en bas de la page.

Vous pouvez obtenir paresseux chargeurs qui permettra d'injecter votre script balises dans votre code. Étant donné que le code n'est pas sur le code HTML, vous pouvez être sûr que votre page entière a rendu correctement et que le JS vous êtes, y compris ne va pas bloquer quoi que ce soit.

5voto

Wolph Points 28062

Oui, elle n'affecte pas la performance de la page de chargement.

Le problème, c'est normal <script> tags bloquant ainsi tout ce qui est après la balise script a plus qu'à attendre jusqu'à la balise script est fait, le chargement et l'analyse avant le reste de la page à charger.

Maintenant, quelqu'un sera probablement notez que si vous utilisez async="true" dans votre balise de script, il ne bloquera pas. Mais c'est uniquement pris en charge par un couple de navigateurs et pourtant si, ce qui n'aidera pas le cas général encore.

De toute façon, en général c'est une bonne idée de placer vos balises de script en bas de la page de sorte qu'ils ne tiendront pas d'autres parties de la page.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X