Comme JavaScript dans les blocs de rendu HTML, et c'est une bonne pratique de garder JavaScript au fond, juste avant la fermeture de la balise body, n'est-ce pas le cas avec CSS aussi?Comme javascript dans <head> bloque le rendu HTML, n'est-ce pas le cas avec CSS aussi?
Je sais que nous ne pouvons pas garder les CSS externes à l'extérieur.
CSS ne bloque pas de la même manière JavaScript ne
Pour citer Yahoo's Developer Network Blog
Avec des feuilles de style, le rendu progressif est bloqué jusqu'à ce que toutes les feuilles de style ont été téléchargés. C'est pourquoi il est préférable de déplacer les feuilles de style vers le document HEAD, afin qu'elles soient téléchargées en premier et que le rendu ne soit pas bloqué. Avec les scripts, le rendu progressif est bloqué pour tout le contenu ci-dessous le script. Si vous déplacez les scripts aussi bas que possible sur la page, il y a plus de contenu au-dessus du script qui est rendu plus tôt.
En outre, lorsque CSS est ajouté à la tête, il est analysé en premier et entraîne le style HTML même s'il est téléchargé. Cela évite le Flash du contenu non créé qui se produit si vous placez des balises de style au bas d'une grande page de HTML.
Pourquoi est-ce que ce serait une bonne pratique de garder Javascript en bas?
Je dirais que c'est une bonne pratique de mettre CSS et Javascript dans des fichiers séparés et de les inclure dans votre document HTML en utilisant la section <head>.
Comme blocs JavaScript chargement supplémentaires - voir: http: // developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/ –
C'est une source vieille de trois ans que vous publiez. En attendant, beaucoup a changé. Surtout avec les moteurs JavaScript. – Rhapsody
'
Les feuilles de style CSS sont chargées à l'aide de l'élément
<link>, cet élément n'est valide que lorsqu'il figure dans la tête du document. Quant au CSS bloquant le rendu HTML, ce n'est pas le cas car le CSS est appliqué une fois le navigateur chargé comme les autres éléments<link>. JS bloque le HTML parce que le navigateur suppose que le JS veut prendre le contrôle et fait quelque chose avant de charger le DOM complètement, JS est exécuté et laissé seul. Pensez-y, si CSS était chargé comme JS, aucun élément ne serait dénommé car il ferait référence à des éléments non encore chargés, il est donc appliqué par la suite et ne bloque pas le chargement.Source
2010-10-26 17:27:56
JS
Depuis JS peut changer votre page Web (modifier le DOM) navigateurs attendre que tous les JS externes à télécharger (en parallèle), interprété et exécuté avant de poursuivre avec le reste du code HTML qui vient après
<script src="..." >Par conséquent, il est recommandé de placer tous les JS externes au bas du<body>.De cette façon, votre code HTML s'analysable et rendu et votre utilisateur a le sentiment que quelque chose se passe ...CSS
CSS d'autre part ne peut pas changer les DOM, ne peut pas apporter des modifications « lourds » sur la page et c'est pourquoi le navigateur ne bloque pas le téléchargement, l'analyse du reste du HTML, et le rendu progressif comme c'est le cas avec le JS. Il semble que cela bloque le rendu, mais il vaut mieux le mettre en haut et éviter le long FOUC. Il ne bloque pas le téléchargement, bien que
Maintenant, semble que avec la montée des appareils mobiles mettant votre CSS à votre
HEADet JS en bas ne suffit pas ... Vous voudrez mettre l'ATF (au-dessus du pli) en ligne CSS et le reste de votre énorme CSS réduit en même temps que vos JS - au fond/defered et asyncJetez un oeil à ceci: http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/
Source
2014-09-01 09:14:56 luigi7up