web-dev-qa-db-fra.com

Où placer JavaScript dans un fichier HTML?

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 code HTML lui-même.

Où 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?

javascripthtmloptimization
201
nickf

Le Yahoo! L'équipe Performance recommandée recommande placer des scripts au 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 que vous en ayez besoin et à peine" est vraiment la bonne réponse, c'est-à-dire "cela dépend".

169
Walter Rumsby

Le meilleur endroit pour cela est juste avant que vous en ayez besoin et pas plus tôt.

En outre, en fonction de l'emplacement physique de vos utilisateurs, l'utilisation d'un service tel que le service S3 d'Amazon peut aider les utilisateurs à le télécharger depuis un serveur physiquement plus proche d'eux que votre serveur.

Votre script js est-il une bibliothèque couramment utilisée comme jQuery ou un prototype? Si tel est le cas, un certain nombre de sociétés, telles que Google et Yahoo, disposent d’outils pour vous fournir ces fichiers sur un réseau distribué.

74
Levi Rosol

En règle générale, le meilleur endroit pour mettre <script> balises est le bas de la page, juste avant </body> tag. 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 posé 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ôte, vous pouvez effectuer plus de deux téléchargements en parallèle. Cependant, lors du téléchargement d’un script, le navigateur ne lance aucun autre téléchargement, même avec un nom d’hôte différent. Plus ...

[~ # ~] css [~ # ~]

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

Lors de nos recherches sur les performances chez Yahoo !, nous avons découvert que le fait de déplacer des feuilles de style dans le document HEAD accélère le chargement des pages. En effet, l'insertion de feuilles de style dans le HEAD permet à la page de s'afficher progressivement. Plus ...

Autres lectures

Yahoo a publié un guide vraiment cool qui répertorie les meilleures pratiques pour accélérer un site Web. À lire absolument: https://developer.yahoo.com/performance/rules.html

56
martynas

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 utilisiez cette quantité de code dans une seule page HTML. Vous demandez probablement où vous devriez charger le fichier Javascript, vous avez déjà reçu des réponses satisfaisantes.

Mais je tiens à souligner que les navigateurs modernes acceptent couramment les fichiers Javascript gzip ! Juste gzip le x.js fichier à x.js.gz, et pointez sur celui de l'attribut src. 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, voir this blog post , et un autre très ancienne page qui est néanmoins utile car il indique que le serveur Web peut détecter si un navigateur peut accepter le code JavaScript compressé, ou ne pas. Si votre côté serveur peut choisir dynamiquement d’envoyer le texte compressé ou compressé, vous pouvez rendre la page utilisable dans tous les navigateurs Web.

4
bart

Mettre le javascript au sommet semblerait plus simple, mais sur le plan fonctionnel, il vaut mieux aller après le code HTML. De cette façon, votre javascript ne fonctionnera pas et ne tentera pas de référencer des éléments HTML avant leur chargement. Ce type de problème ne devient souvent apparent 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'ait de sens que si vous n'utilisez pas tout le code tout le temps.

4
Matthias Wandel

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

3
Sam Hasler

La réponse est dépend comment vous utilisez les objets de javascript. Comme déjà indiqué, le chargement des fichiers javascript au pied de page plutôt qu’en-tête améliore certes les performances, mais il convient de 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 est de charger les fichiers 'js' placés dans un dossier qui sera disponible pour tous les fichiers.

1
GustyWind

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

0
José Salgado

Comme d’autres l’ont dit, cela devrait probablement aller dans un fichier externe. Je préfère inclure ces fichiers à la fin de <head />. Cette méthode est plus humaine que la machine, mais de cette façon, je sais toujours où se trouve le JS. Il est tout simplement pas aussi lisible d'inclure des fichiers de script ailleurs (à mon humble avis).

Si vous avez vraiment besoin de presser chaque ms, vous devriez probablement faire ce que Yahoo dit.

0
Berserk