Comme javascript blocs rendu HTML, est-ce pas le cas avec les CSS aussi?
https://stackoverflow.com/questions/4026183
-
26-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
JavaScript dans des blocs de rendu HTML, et il est bon de garder JavaScript au fond, juste avant la fermeture balise body, est-ce pas le cas avec le CSS aussi?
Je sais que nous ne pouvons pas garder l'extérieur CSS externe.
La solution
CSS ne bloque pas de la même manière JavaScript Finalité
Avec des feuilles de style, le rendu progressif est bloqué jusqu'à ce que toutes les feuilles de style ont été téléchargés. Voilà pourquoi il est préférable de déplacer les feuilles de style au document HEAD, donc ils sont téléchargés en premier et le rendu est pas bloqué. Avec les scripts, le rendu progressif est bloqué pour tout le contenu ci-dessous le script. Déplacement des scripts aussi bas dans la page en tant que moyens possibles 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 d'abord analysé et les résultats dans le code HTML étant même style comme il est téléchargé. Cela évite le FOUC qui se produit si vous placez les balises de style au bas d'une grande page HTML.
Autres conseils
Non seulement CSS pas bloquer la voie ne Javascript, mais aussi certains navigateurs faire des choses étranges si vous mettez CSS partout mais le <head>, comme l'ignorer, ou appliquer de manière incomplète. HTML5 interdit effectivement <style> d'apparaître en dehors <head> (sauf avec la fonction « scope », qui met en œuvre encore personne ne afaik).
feuilles de style CSS sont chargés en utilisant l'élément <link>, cet élément est valable uniquement quand il est dans la tête du document. En ce qui concerne le rendu HTML bloquant CSS, ce n'est pas le cas parce que le CSS est appliqué une fois que le navigateur est chargé tout comme les autres éléments de <link>. JS blocs HTML parce que le navigateur suppose que la JS veut prendre le contrôle et réellement faire quelque chose avant de charger le DOM complètement, essentiellement JS est exécuté puis laissé seul.
Pensez-y, si CSS a été chargé le même que JS, aucun élément serait de style, car il se référer à des éléments non encore chargés, donc il est appliqué par la suite et ne bloque pas le chargement.
Non, css applique à droite de l'élément DOM après que le navigateur a lu le css.
En cas de javascript vous pouvez garder le script à lire, puisque vous faites courir après toutes les charges html, comme:
window.onload = function (){
//here we start
}
JS
Depuis JS peut changer votre page Web (modifier le DOM) pour tous les navigateurs attendent JS externes à télécharger (en parallèle), interprétées et exécutées avant de poursuivre avec le reste du code HTML qui vient après <script src="..." >
Par conséquent, il est une bonne pratique de mettre tous les JS externes au fond du <body>. De cette façon, votre code HTML et rendu s'analysable 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 « de lourdes » sur la page et qui est la raison pour laquelle le navigateur ne bloque pas le téléchargement, l'analyse syntaxique du reste du HTML, et le rendu progressif est le cas avec la JS. Il semble qu'il ne bloque le rendu, mais il est toujours préférable de le mettre en haut et éviter la longue FOUC . Il ne bloque pas le téléchargement, mais
Maintenant, semble que la montée des appareils mobiles mettre votre CSS à votre HEAD et JS au fond ne suffit pas ... Vous voulez mettre l'ATF (au-dessus du pli) en ligne CSS et le reste de votre énorme minimisées CSS avec vos JS - au fond / defered et async
Jetez un oeil à ceci: http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/
Pourquoi serait-il une bonne pratique de garder Javascript en bas?
Je dirais qu'il est préférable de mettre la pratique CSS, ainsi que Javascript dans des fichiers séparés et les inclure dans votre document HTML en utilisant la section <head>.
