Où placer JavaScript dans un fichier HTML?

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

Où est le meilleur endroit pour mettre ceci 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>

il n'y Aura aucune différence fonctionnelle entre chacune des options?

186
demandé sur Xufox 2008-10-13 08:19:52
la source

11 ответов

Le Yahoo! Équipe de Performance exceptionnelle recommande placer des scripts au bas de votre page en raison de la façon dont les navigateurs télécharger les composants.

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

161
répondu Walter Rumsby 2008-10-13 09:12:24
la source

le meilleur endroit pour elle est juste avant que vous en avez besoin et pas avant.

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.

est-ce que votre script js est un lib couramment utilisé comme jQuery ou prototype? Si oui, Il ya un certain nombre d'entreprises, comme Google et Yahoo, qui ont des outils pour fournir ces fichiers pour vous sur réseau distribué.

70
répondu Levi Rosol 2016-08-17 15:13:25
la source

en règle générale, le meilleur endroit pour mettre <script> tags est en bas de la page, juste avant </body> tag. Quelque chose comme ceci:

<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 servez vos images de multiples les noms d'hôtes, vous pouvez obtenir plus de deux téléchargements en parallèle. Pendant qu'un script est en cours de téléchargement, cependant, le navigateur ne démarrera 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.

tout en recherchant la performance chez Yahoo!, nous découvert que le déplacement des feuilles de style à la tête du document rend les pages semblent charger plus rapidement. C'est parce que mettre des feuilles de style dans la tête permet à la page de rendre progressivement. plus...

nouvelle lecture

Yahoo ont publié un guide vraiment cool qui énumère les meilleures pratiques pour accélérer un site web. Certainement la peine de lire: https://developer.yahoo.com/performance/rules.html

52
répondu martynas 2014-07-09 17:44:21
la source

avec 100k De Javascript, vous ne devriez jamais le mettre à l'intérieur du fichier. Utilisez un fichier Javascript de script externe. Il n'y a aucune chance que vous n'utilisiez cette quantité de code que sur une seule page HTML. Probablement vous demandez où vous devriez charger le fichier Javascript, pour cela vous avez déjà reçu des réponses satisfaisantes.

mais je tiens à souligner que généralement, les navigateurs modernes acceptent gzip fichiers Javascript! Il suffit de gzip le x.js file à x.js.gz , et pointer vers celui de l'attribut src . Il ne fonctionne pas sur le système de fichiers local, vous avez besoin d'un serveur web pour qu'il 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. Apparemment, ça ne marche pas comme ça dans Safari 3.

pour plus d'informations, voir ce billet de blog , et une autre très ancienne page qui est néanmoins utile parce qu'il souligne que le serveur web peut détecter si un navigateur peut accepter Javascript gzippé, ou non. Si votre côté serveur peut choisir dynamiquement d'envoyer le gzippé ou le texte simple, vous pouvez rendre la page utilisable dans tous les navigateurs web.

3
répondu bart 2008-10-13 11:36:41
la source

à l'Aide cuzillion vous pouvez tester l'effet sur la page de chargement des différents placement des balises de script à l'aide de différentes méthodes: en ligne, externe, "balises HTML", "du document.Ecrire", "JS DOM element"," iframe", et"XHR eval". Voir la aide pour une explication des différences. Il peut également tester des feuilles de style, des images et des iframes.

3
répondu Sam Hasler 2008-10-16 18:22:33
la source

mettre le javascript en haut semble plus approprié, mais fonctionnellement, il est préférable d'aller après le HTML. De cette façon, votre javascript ne s'exécute pas et n'essaie pas de faire référence aux éléments HTML avant qu'ils ne soient chargés. Ce genre de problème devient souvent évident lorsque vous chargez la page sur une connexion internet actuelle, particulièrement 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.

3
répondu Matthias Wandel 2008-10-16 18:44:15
la source

est La réponse dépend de la façon dont vous utilisez les objets de javascript. Comme déjà indiqué chargement des fichiers javascript au pied de page plutôt que l'en-tête améliore certainement la performance, mais il faut prendre soin que les objets qui sont utilisés sont initialisés plus tard qu'ils sont chargés au pied de page. Une autre façon est de charger les fichiers' js ' placés dans le dossier qui sera disponible pour tous les fichiers.

1
répondu GustyWind 2008-10-13 12:33:56
la source

Comme d'autres l'ont dit, il devrait plus susceptibles d'aller dans un fichier externe. Je préfère inclure ces fichiers à la fin de . 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 n'importe où ailleurs (imho).

I vous avez vraiment besoin de presser chaque dernier ms alors vous devriez probablement faire ce que Yahoo dit.

0
répondu Berserk 2008-10-13 12:51:21
la source

vos liens javascript peuvent se trouver soit dans la tête, soit à la fin de la balise body, il est vrai que la performance s'améliore en plaçant le lien à la fin de votre balise body, mais à moins que la performance soit un problème, les placer dans la tête est plus agréable à lire et vous savez où se trouvent les liens et pouvez les référencer plus facilement.

-1
répondu Timothy Trousdale 2015-11-18 20:12:28
la source

je dirais que cela dépend de ce que vous avez prévu de faire avec le code Javascript:

  • si vous avez prévu d'insérer externe de votre script JS(s), le meilleur l'endroit est en tête de la page
  • si vous avez prévu d'utiliser des pages sur les smartphones, puis bas de la page, juste avant la balise.
  • mais, si vous avez prévu de faire la combinaison HTML et JS (dynamiquement créé et peuplé HTML table, par exemple) puis vous doit mettre où vous en avez besoin.
-1
répondu Ludus H 2016-07-26 14:49:56
la source

Je l'ai toujours mis au bas de ma page comme la réponse de Walter Rumsby mais JavaScript externe va dans la tête. Maintenant, avec CSS Je ne sais pas j'utilise toujours CSS externes afin qu'il puisse couvrir l'ensemble de mon site web.

-2
répondu Sixtysixpointsixty-four 2016-01-14 15:17:39
la source

Autres questions sur javascript html optimization