Le <script> position de la balise HTML affecte les performances de la page web?
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 parler de tout est de nouveau dans les <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 mettre les scripts en bas, mais traditionnellement, beaucoup de gens mettre dans <head>
balise qui est au-dessus de la <body>
tag. 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 l'affichage de la source de cette page! Et dites-moi quel est le meilleur style pour de meilleures performances.
- Je pense que cela a déjà été discuté sur DONC voir here et ici .
- Double Possible de JavaScript balises, de la performance et du W3C.
Vous devez vous connecter pour publier un commentaire.
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 de
<script>
balises dans la tête, appelant plusieurs scripts externes permet de bloquer laHTML
de chargement, donc saluer l'utilisateur avec un écran blanc vide, parce que pas d'autre contenu sur votre page se charge jusqu'à la 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 le
</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 dont cela peut être réalisé par:
XHR Eval
Script de l'Élément DOM
Meebo Iframed JS
Pour n'en nommer que quelques...
Note: Seulement un maximum de cinq scripts peuvent être chargés en parallèle dans les navigateurs actuels.
Pour
IE
il est ledifférer
attribut que vous pouvez utiliser comme: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:
http://railsapps.github.io/rails-javascript-include-external.html
<script>
le placement des étiquettes, vous aurez de nombreuses autres bas de la pendaison de performance de fruits à choisir donc le code pour la maintenabilité, la facilité de développement, et de la lisibilité.Des é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.
Des é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 meilleur dépend de la
importancepriorité (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:
et pas
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 ces exemples:
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
les 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.Oui, elle n'affecte pas la performance de la page de chargement.
Le problème, c'est normal
<script>
les balises sont, 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 va 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.
Tout d'abord les balises de script pas à l'intérieur du corps/tête les éléments de créer du code HTML non valide et peut même causer quelques exceptions dans certains navigateurs.
Des balises de Script à l'intérieur de l'élément de tête sera chargé et interprété avant tout code HTML est affiché, cela bloque HTML/CSS rendu.
Des balises de Script en bas de la balise body, ne bloquera pas l'HTML/CSS et puisque vous ne pouvez jouer avec les DOM sur DomReady, c'est la meilleure position pour mettre votre JavaScript. Comme une note de côté, vous n'aurez même pas besoin d'utiliser un domReady événement wrapper.
Alternativement, vous pouvez également utiliser des bibliothèques comme LABJS et RequireJS pour démarrer votre JavaScript dans la balise head (très peu de HTML/CSS de blocage). Tous les scripts chargés par le biais de l'une de ces bibliothèques s'exécuter en parallèle de HTML/CSS rendu.
INITSCRIPT.js
Dans l'exemple ci-dessus, seule la charge et de l'interprétation de require.js va bloquer HTML/CSS de rendu, ce qui est généralement négligeable. Après quoi jQuery et somePlugin sera chargé en parallèle, de sorte que HTML/CSS rend tout aussi bien.
Performance du script lui-même sera certainement le même.
Le placement est important, comme expliqué dans l'article lié, depuis le navigateur "halte" (ou "gel") téléchargements simultanés et le rendu de la page lorsqu'il rencontre et charge le contenu d'un
<script>
tag. Donc, il est probablement préférable de laisser le navigateur le rendu de la page et appliquer des styles CSS, et puis inclure votre.js
. Il aura un aspect plus lisse à l'utilisateur.Également, y compris le script en bas signifie probablement juste avant de fermer la
<body>
tag.Avec l'aspect Performance, vous devez également être prudent lorsque vous joignez le
<script>
balise à l'intérieur de la<head>
tag.Considérons l'exemple suivant:
Ici, notez que le script est chargé avant le DOM (ou le
<p>
tag) est chargée, ce qui provoque une erreur dans le script (Depuis la getElementById ne trouvez pas l'élément avec le nom "démo").Dans de tels cas, vous devez utiliser le script dans la balise body seulement.
Considérant les autres réponses, de son mieux pour avoir le script toujours avant le
</body>
balise que vous ne savez jamais si les scripts que vous chargez de l'extérieur ont une telle dépendances sur votre DOM.Référence: Détaillée de la description du problème