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?
11 réponses
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".
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é.
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
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.
à 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.
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.
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.
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
I vous avez vraiment besoin de presser chaque dernier ms alors vous devriez probablement faire ce que Yahoo dit.