Où placer JavaScript dans un fichier HTML?

210

Disons que j'ai un fichier JavaScript assez volumineux, compressé à environ 100 Ko environ. Par fichier, je veux dire que c'est un fichier externe qui serait lié via <script src="...">, non collé dans le HTML lui-même.

Quel est le meilleur endroit pour mettre cela dans le HTML?

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

Y aura-t-il une différence fonctionnelle entre chacune des options?

javascript html optimization nickf
la source
Copie possible de Où dois-je mettre les balises <script> dans le balisage HTML?
Ivar

Réponses:

175

Yahoo! L'équipe Performance exceptionnelle recommande de placer des scripts en bas de votre page en raison de la façon dont les navigateurs téléchargent les composants.

Bien sûr, le commentaire de Levi "juste avant d'en avoir besoin et pas plus tôt" est vraiment la bonne réponse, c'est-à-dire "cela dépend".

Walter Rumsby
la source
4
Par exemple, si vous allez faire un tas de trucs jQuery, vous aurez besoin de la bibliothèque chargée avant d'essayer de l'utiliser.
BryanH
58
En outre, la raison pour laquelle Yahoo EPT recommande de placer JS en bas est parce que le navigateur doit passer en mode monothread pendant que le JS se charge puis s'exécute. Si le script se trouve dans la tête ou au milieu du contenu, le navigateur "s'arrêtera" pendant qu'il traite du JS. En plaçant le JS en bas, le contenu sera chargé et généralement visible afin que l'utilisateur puisse commencer à le lire pendant que le navigateur traite toujours le JS.
BryanH
1
Salut. Mettons-nous également un code comme celui-ci $(function () {...})au bas de la page, ou doit-il être à l'intérieur <head>?
Thang Pham
7
J'espère que faire référence au "bas de votre page" ici n'est pas au </body>- delà ?
Mr_Green
1
Les navigateurs modernes peuvent également lire l'attribut "différer". Vous pouvez définir defer = "defer" sur les balises de script qui ne se trouvent pas au bas du <body>, et lorsque le navigateur les verra, il terminera d'abord le chargement du reste du code HTML, puis reviendra en arrière et interprétera le contenu de la balise de script. Cela est utile si vous utilisez une sorte de framework où vous n'avez pas le contrôle total de la page. Creusez dans cet article et notez qu'il s'agit d'un document
évolutif,
75

Le meilleur endroit pour cela est juste avant d'en avoir besoin et pas plus tôt.

De plus, selon l'emplacement physique de vos utilisateurs, l'utilisation d'un service comme le service S3 d'Amazon peut aider les utilisateurs à le télécharger à partir d'un serveur physiquement plus proche d'eux que votre serveur.

Votre script js est-il une bibliothèque couramment utilisée comme jQuery ou prototype? Si c'est le cas, il existe un certain nombre d'entreprises, comme Google et Yahoo, qui ont des outils pour vous fournir ces fichiers sur un réseau distribué.

Levi Rosol
la source
60

En règle générale, le meilleur endroit pour mettre des <script>balises est le bas de la page, juste avant la </body>balise. Quelque chose comme ça:

<html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
    </body>
</html>

Pourquoi?

Le problème causé par les scripts est qu'ils bloquent les téléchargements parallèles. La spécification HTTP / 1.1 suggère que les navigateurs ne téléchargent pas plus de deux composants en parallèle par nom d'hôte. Si vous diffusez vos images à partir de plusieurs noms d'hôtes, vous pouvez obtenir plus de deux téléchargements en parallèle. Cependant, pendant le téléchargement d'un script, le navigateur ne démarre aucun autre téléchargement, même sur des noms d'hôtes différents. Plus...

CSS

Un peu hors sujet, mais ... Mettez les feuilles de style en haut.

Lors de nos recherches sur les performances de Yahoo !, nous avons découvert que le déplacement des feuilles de style vers le document HEAD rend le chargement des pages plus rapide. En effet, le fait de placer des feuilles de style dans la TETE permet à la page de s'afficher progressivement. Plus...

Lectures complémentaires

Yahoo a publié un guide vraiment cool qui répertorie les meilleures pratiques pour accélérer un site Web. Vaut vraiment la peine d'être lu: https://developer.yahoo.com/performance/rules.html

martynas
la source
1
"Le problème causé par les scripts est qu'ils bloquent les téléchargements parallèles." - Ce n'est plus vrai: w3.org/TR/html5/scripting-1.html#attr-script-async
Quentin
4

Avec 100k de Javascript, vous ne devriez jamais le mettre dans le fichier. Utilisez un fichier Javascript de script externe. Il n'y a aucune chance que vous n'utilisiez cette quantité de code que dans une seule page HTML. Vous vous demandez probablement où vous devez charger le fichier Javascript, pour cela vous avez déjà reçu des réponses satisfaisantes.

Mais je voudrais souligner que les navigateurs modernes acceptent généralement les fichiers Javascript gzip ped! Gzipez le x.jsfichier x.js.gzet pointez-le dans l' srcattribut. Cela ne fonctionne pas sur le système de fichiers local, vous avez besoin d'un serveur Web pour que cela fonctionne. Mais les économies en octets transférés peuvent être énormes.

Je l'ai testé avec succès dans Firefox 3, MSIE 7, Opera 9 et Google Chrome. Cela ne fonctionne apparemment pas de cette façon dans Safari 3.

Pour plus d'informations, consultez cet article de blog et une autre page très ancienne qui est néanmoins utile car elle indique que le serveur Web peut détecter si un navigateur peut accepter Javascript Javascript compressé ou non. Si votre serveur peut choisir dynamiquement d'envoyer le texte compressé ou le texte brut, vous pouvez rendre la page utilisable dans tous les navigateurs Web.

Bart
la source
8
Vous avez mal compris la question du PO. Il demandait où dans le HTML mettre la balise de script. Il utilisait déjà un fichier externe, n'incluant pas le script. Certes, cela était moins clair avant sa révision de la question en avril 2009. Peut-être supprimer cette réponse?
Mark Amery
@Leandro Je suppose que c'est parce que les gens ne gardent pas toujours à l'esprit la vraie question, mais considèrent toujours des réponses comme celle-ci utiles. Néanmoins, cette réponse est utile mais pas nécessairement pertinente. Cela pourrait mieux fonctionner si l'info-bulle de vote contient une formulation plus explicite, par exemple «Cette réponse est utile et pertinente».
WynandB
1
Sur Javascript gzippé: Vous pouvez simplement configurer votre serveur web pour le compresser également ... (Ou utiliser quelque chose comme le module / l'option gzip_static de nginx) (et le gunzip pour les autres clients) Cela devrait au moins envoyer l'en-tête de type de contenu correct, avec un encodage marqué comme gzip, résultant probablement en une meilleure prise en charge du navigateur
Gert van den Berg
4

Mettre le javascript en haut semblerait plus net, mais fonctionnellement, il vaut mieux aller après le HTML. De cette façon, votre javascript ne fonctionnera pas et n'essaiera pas de référencer les éléments HTML avant qu'ils ne soient chargés. Ce type de problème n'apparaît souvent que lorsque vous chargez la page via une connexion Internet réelle, en particulier une connexion lente.

Vous pouvez également essayer de charger dynamiquement le javascript en ajoutant un élément d'en-tête à partir d'un autre code javascript, bien que cela n'a de sens que si vous n'utilisez pas tout le code tout le temps.

Matthias Wandel
la source
3

En utilisant cuzillion, vous pouvez tester l'effet sur le chargement de page de différents emplacements de balises de script en utilisant différentes méthodes: en ligne, externe, "balises HTML", "document.write", "élément JS DOM", "iframe" et "XHR eval" . Voir l' aide pour une explication des différences. Il peut également tester des feuilles de style, des images et des iframes.

Sam Hasler
la source
1

La réponse est dépend de la façon dont vous utilisez les objets de javascript. Comme indiqué précédemment, le chargement des fichiers javascript au pied de page plutôt qu'en-tête améliore certainement les performances, mais il faut veiller à ce que les objets utilisés soient initialisés plus tard qu'ils ne sont chargés au pied de page. Une autre façon consiste à charger les fichiers «js» placés dans un dossier qui sera disponible pour tous les fichiers.

GustyWind
la source
0

Comme d'autres l'ont dit, il devrait très probablement être placé dans un fichier externe. Je préfère inclure ces fichiers à la fin de <head />. Cette méthode est plus conviviale pour les humains que pour les machines, mais de cette façon, je sais toujours où se trouve le JS. Il n'est tout simplement pas aussi lisible d'inclure des fichiers de script ailleurs (à mon humble avis).

Si vous avez vraiment besoin d'extraire toutes les dernières ms, vous devriez probablement faire ce que Yahoo dit.

Fou furieux
la source
0

Les scripts doivent être inclus à la fin de la balise body car de cette façon, le code HTML sera analysé par le navigateur et affiché avant le chargement des scripts.

José Salgado
la source
0

La réponse à la question dépend. Il y a 2 scénarios dans cette situation et vous devrez faire un choix en fonction de votre scénario approprié.

Scénario 1 - Script critique / Script nécessaire

Dans le cas où le script que vous utilisez est important pour charger le site Web, il est recommandé de le placer en haut de votre document HTML, c'est-à-dire <head>. Quelques exemples: code d'application, bootstrap, polices, etc.

Scénario 2 - Scripts moins importants / analytiques

Il existe également des scripts utilisés qui n'affectent pas la vue du site Web. Il est recommandé de charger ces scripts après le chargement de tous les segments importants. Et la réponse à cela sera en bas du document, c'est-à-dire en bas de votre <body>avant la balise de fermeture. Certains exemples incluent - Google Analytics, Hotjar, etc.

Bonus - async / différé

Vous pouvez également indiquer aux navigateurs que le chargement du script peut être effectué simultanément avec d'autres et peut être chargé en fonction du choix du navigateur en utilisant un argument defer / async dans le code du script.

par exemple. <script async src="script.js"></script>

Praveen Thirumurugan
la source
-1

Vos liens javascript peuvent se trouver soit dans la tête soit à la fin de la balise body, il est vrai que les performances s'améliorent en mettant le lien à la fin de votre balise body, mais à moins que les performances ne soient un problème, les placer dans la tête est plus agréable pour que les gens lisent et vous savez où se trouvent les liens et pouvez les référencer plus facilement.

Timothy Trousdale
la source
-1

Je dirais que cela dépend en fait de ce que vous envisagez de réaliser avec du code Javascript:

  • si vous avez prévu d'insérer des scripts JS externes, alors le meilleur endroit est en tête de page
  • si vous prévoyez d'utiliser des pages sur les smartphones, puis en bas de page, juste avant le tag.
  • mais, si vous envisagez de créer une combinaison HTML et JS (tableau HTML créé et rempli dynamiquement, par exemple), vous devez le placer là où vous en avez besoin.
Ludus H
la source
Qu'est-ce que j'ai dit mériter moins!? Décidément.
Ludus H
Qu'est-ce qu'être externe a à voir avec la mise en tête du script? Pourquoi le bas de la page est-il un bon endroit pour mettre des scripts spécifiquement pour les téléphones intelligents? Votre déclaration sur la génération dynamique de HTML à partir de JS n'est vraie que si vous utilisez document.write, ce que vous ne devriez probablement pas être.
Quentin
Vous avez "présumé" ce que je pensais et parce que ma réponse est devenue négative? Vous pensez probablement que votre présomption est meilleure que mon explication, non? Je prévoyais juste de faire une courte explication, si quelqu'un est incapable de comprendre, il demandera plus d'informations. Dans mon commentaire, j'ai suggéré de mettre JS en fin de page pour les téléphones intelligents et les tablettes, juste avant la fin du corps, car le chargement de la page entière est plus rapide car le navigateur n'a pas besoin de passer en mode "single thread", le contenu de la page commencera à apparaître à l'écran ... mais vous le savez probablement.
Ludus H