La plupart des livres / articles de développement web et javascript indiquent que vous devez mettre CSS dans la balise head et javascript au bas de la page.
Mais lorsque j'ouvre la source html de sites Web célèbres tels que celui-ci, je trouve qu'ils mettent des fichiers js dans la balise head.
Quels sont les avantages et les inconvénients des deux approches et quand les utiliser?
Une autre question a été trouvée pour le même problème: Où dois-je déclarer les fichiers JavaScript utilisés dans ma page? À <head> </head> ou à proximité </body>?
javascript
Amr Elgarhy
la source
la source
Réponses:
D'après les meilleures pratiques de Yahoo pour accélérer votre site Web :
Par conséquent, en général, il est préférable de les mettre en bas. Cependant, il est pas toujours possible, et souvent elle ne fait pas que beaucoup de différence de toute façon.
la source
Comme d'autres l'ont dit, lorsque vous mettez du javascript dans la tête, cela retarde le rendu de la page jusqu'à ce que les scripts aient été chargés, ce qui signifie que le chargement de la page peut prendre plus de temps - surtout si vous téléchargez de gros fichiers de script.
Si vous déplacez vos balises de script à la fin de la page, vous vous assurerez que le navigateur télécharge les images et les feuilles de style avant les balises de script et la page apparaîtra probablement pour être rendue avant que les scripts ne commencent à s'exécuter. Cela signifie également que si vous dépendez de certaines fonctionnalités de vos scripts, cela ne sera disponible qu'un peu après que la page soit visible par l'utilisateur.
Si vous ajoutez des styles ou des éléments (etc. en changeant de champs de texte avec une forme d'éditeur plus riche), cela sera visible par l'utilisateur sous forme de scintillement.
Si vous ajoutez des événements de clic à des éléments, ils ne seront cliquables qu'un peu après que les éléments eux-mêmes soient visibles.
Parfois, ces problèmes vous obligent à mettre vos scripts dans la tête, d'autres fois, tout ira bien en les collant en bas.
IMHO (complètement contre YSlow et beaucoup de gens intelligents), vous devriez garder vos scripts dans la balise head, et comptez simplement sur eux pour être mis en cache la plupart du temps.
la source
En général, vous devez placer les références de script au bas de votre page. Les scripts doivent non seulement être téléchargés, ils doivent également être évalués et exécutés avant que le bloc ne soit libéré et que la page procède au processus de rendu. Des choses comme Modernizr devraient être placées en haut car il effectue des détections de fonctionnalités ainsi que des shims HTML5 que vous voudrez probablement.
Une autre raison pour laquelle vous voulez essayer de placer des scripts au bas de la page est les points d'échec uniques ou SPOF. C'est là qu'un appel de script expire ou pour une autre raison bloque l'exécution de la page. Cela peut arriver souvent avec des bibliothèques publicitaires tierces, etc.
Oui, vous devrez peut-être réfléchir un peu plus à la manière dont vous concevez votre application, mais j'ai trouvé que cela devenait très naturel très rapidement pour moi. J'ai construit des centaines d'applications Web au cours des 4 dernières années avec le script en bas et je peux faire la différence. Je peux faire 500 ms, peut-être 5000 ms, mais tout compte.
la source
Cela dépend vraiment de votre site Web. Si vous accédez et invoquez les fonctions JavaScript à l'intérieur du corps, il doit être référencé dans l'en-tête pour qu'il soit chargé. Sinon, si vous n'allez appeler le JavaScript que lorsque tout le document est chargé, il est sage de placer le JavaScript à la fin du corps. En plaçant le fichier .JS à la fin, vous chargez la page entière, puis récupérez le fichier .JS. De cette façon, l'utilisateur pourra voir rapidement la page et au moment où il se familiarisera avec la page, le fichier .JS a déjà été téléchargé.
la source
Tout javascript dans l'en-tête sera évalué avant le chargement de la page, ce qui signifie que la page semble prendre plus de temps à charger. Il est légèrement plus difficile de faire fonctionner correctement les événements si tout le javascript est à la fin, mais jQuery résout à peu près ce problème pour vous.
la source