Où doit être placé le fichier CSS ?

Le fichier CSS doit être placé dans l'en-tête en haut du HTML. Raison : Le navigateur analyse le document HTML de haut en bas. Si le CSS est placé en bas, la page peut être rendue progressivement, mais une fois le CSS téléchargé et analysé, le texte et les images qui ont été rendus devront être restitués. redessiné selon le nouveau style, ce qui est une mauvaise expérience utilisateur.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Le fichier CSS doit être placé dans l'en-tête en haut du HTML.

pourquoi ?

<link rel="stylesheet" href="home.css">

L'attribut href (référence HyperText) dans la balise link représente une référence hypertexte Lorsque CSS utilise la référence href, le navigateur reconnaîtra. Le document est CSS et est téléchargé en parallèle. Il n'arrêtera pas de charger le document actuel lors du chargement de HTML pour générer une arborescence DOM, l'arborescence DOM peut être rendue en même temps. Cela peut éviter des scintillement, des écrans blancs ou des mises en page confuses. .

Dans la situation la plus idéale, nous espérons que le navigateur restituera progressivement le CSS téléchargé et affichera progressivement la page à l'utilisateur. Cependant, afin d'éviter de restituer les éléments de la page lorsque les styles changent, le navigateur bloque le rendu progressif du contenu. Le navigateur attend que tous les styles soient chargés avant de restituer la page en même temps.

Si le fichier CSS est placé en bas, le navigateur empêche le rendu progressif du contenu. Pendant que le navigateur attend le téléchargement du dernier fichier CSS, un "écran blanc" apparaît (écran blanc lorsque. une nouvelle connexion est ouverte, puis le texte apparaît en premier, les images en dernier et les styles en dernier). C'est très grave, car lorsque la vitesse d'Internet est très lente, le temps de téléchargement CSS est relativement long, ce qui amène naturellement un « écran blanc » à l'utilisateur pendant une longue période, et l'expérience utilisateur est très mauvaise.

Les fichiers CSS sont placés en haut car l'ordre de placement détermine la priorité de téléchargement, et plus important encore, le mécanisme de rendu du navigateur.

css n'affectera pas la génération de l'arborescence DOM pendant le processus de chargement, mais cela affectera la génération de l'arborescence de rendu, qui à son tour affecte la mise en page. Par conséquent, d'une manière générale, la balise de lien. de style doit être placé autant que possible dans l'en-tête, car l'arborescence DOM est analysée de haut en bas et le style CSS est chargé de manière asynchrone, dans ce cas, en analysant le nœud du corps sous l'arborescence DOM et en chargeant le style CSS peut être aussi parallèle que possible, accélérant la vitesse de génération de l'arbre de rendu.

Placez le CSS en bas et la page peut être rendue progressivement. Cependant, une fois le CSS téléchargé et analysé, le texte et les images qui ont été rendus devront être redessinés selon le nouveau style. C'est une mauvaise expérience utilisateur.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!