juste curieux pourquoi il y a une amélioration de la performance lorsque vous standardisez un site avec le CSS et JS dans les en-têtes et en haut / bas de la page.
8 Réponses :
Il n'est pas standard de mettre des fichiers JS dans l'en-tête, la plupart du temps, il est encore préférable de les mettre au bas d'une page, car le JS se charge après le chargement du HTML. Cela permet d'utiliser directement des éléments HTML (par exemple, ajoutant des gestionnaires à certaines divs, etc.). Pour CSS, en particulier la balise , il est standard de l'utiliser dans l'en-tête. Cela rend le style disponible pour le HTML chargé dans le
Ce n'est pas tout à fait correct. Dit simplement:
Les déclarations de style doivent être aussi proches que possible du haut que possible, car les navigateurs ne rendront pas votre page avant de charger le CSS (pour éviter un éclairage non collé)
Les balises de script doivent être aussi proches que possible du fond possible, car elles bloquent les navigateurs de l'analyse après la balise avant de charger et de terminer (car le script peut modifier le document avec document.write)
Si vous êtes intéressé par Frontend Performances, je vous recommande vivement de lire Sites Web haute performance: connaissances essentielles pour les ingénieurs frontaux par Steve Souders.
Vous pouvez différer Javascripts, dire au navigateur que le JS chargé ne modifie pas la page. Cependant, votre réponse est la plus correcte (au moment de l'écriture, donc +1 de moi)
Tous les navigateurs ne respecteront pas différer malheureusement.
CSS doit être en haut, le navigateur peut donc commencer la mise en page immédiatement.
JavaScript doit être en bas. JavaScript peut contenir document.write (), de sorte que le navigateur ne puisse rien rendre après JavaScript avant d'exécuter le JavaScript.
La raison pour mettre CSS dans le haut est de le charger avant de rendre la page, de sorte que la page est rendue avec ses styles. Sinon, il sera rendu sans la conception, puis re-rendu. Le JS est souvent chargé en bas, pas en haut. La raison de charger certaines JS dans l'en-tête est de l'avoir disponible sur la page (sinon, vous pouvez appeler un objet / une fonction non définie, si vous avez JS dans le corps de la page, qui utilise des bibliothèques externes)
Je pourrais être une amélioration de la performance si vous déplacez votre JavaScript sur le bas de la page ...
AFAIK CSS n'est vraiment valable que dans l'en-tête, mais également, à la fois CSS et JS, ils doivent être dans la tête de sorte que, à ce moment-là, quelque chose de la page le nécessite, ils sont définitivement disponibles.
Par exemple, si vous avez une fonction JS Appel dans le corps de la page, mais cette fonction n'a pas été déclarée avant la main, puis bien sûr, vous obtiendrez une erreur de script.
En termes de performance, je ne suis au courant d'aucune augmentation de la performance en les ayant dans la tête, mais je pourrais me tromper ici. Vous pouvez parfois obtenir une amélioration de la performance de certains scripts en les ayant au bas de la page, mais c'est simplement parce que d'autres contenus sont rendus avant la main (plutôt que le navigateur calant le rendu tandis que le chargement des ressources externes)
Il y a beaucoup de pourquoi est là-bas, mais je vais toujours avec celui de et
Merci pour des liens. Grandes explications.
Je pense que les avantages que vous parlez peuvent être plus facilement attribués à la mise en place du code dans un fichier distinct plutôt que l'inclusion des fichiers à un point spécifique sur une page.
Certainement avec JavaScript, vous pouvez dessiner sur des aspects tels que la minification et la zippation plus facilement si elles sont placées dans un fichier séparé.
Si un fichier JS ou CSS est utilisé sur plusieurs pages, la mise en cache peut également jouer un rôle dans l'amélioration des performances.
Je pense que CSS dans le corps
n'est même pas valide (je veux direlien etstyle étiquettes et selon le Spécification , j'ai raison;)Vous pouvez trouver des informations précieuses ici: Stackoverflow.com/Questtions/196702/...
Voulez-vous dire pourquoi une augmentation de la performance de la mise en place des ressources à l'intérieur de l'élément ? Parce que ce n'est pas vrai. Par exemple, télécharger JavaScript bloque dans la nature.