Disons que nous avons une page HTML avec une seule feuille de style <link> . Comment le navigateur prend-il les règles de cette feuille de style et les applique-t-il au HTML ? Je ne cherche pas à savoir comment accélérer le processus, je veux savoir comment le rendu lui-même est géré.
Est-ce qu'il applique chaque règle une par une en analysant la feuille de style et en rendant le résultat progressivement ? Ou bien, le contenu du fichier CSS est-il entièrement téléchargé, puis entièrement évalué, et puis appliqué au HTML en une seule fois ? Ou quelque chose d'autre ?
Je pose cette question après avoir posté une réponse plus tôt sur une question sur l'ordre des règles CSS affectant la vitesse de rendu en supposant que les styles ont été rendus. comme le chargement de la feuille de style, ainsi les premières règles seraient appliquées avant les dernières, et non pas toutes en même temps. Je ne sais pas où j'ai trouvé cette idée, c'est juste quelque chose que j'ai toujours pensé.
J'ai essayé une démo sur mon serveur qui ressemblait à ceci :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="test.css" />
</head>
<body></body>
</html>test.css le contenu :
html { background:green }
/* thousands of lines of irrelevant CSS to make the download slow */
html { background:red }Lors du test dans Firefox 5, je m'attendais à voir du vert au début, puis du rouge. Cela ne s'est pas produit. J'ai essayé avec deux feuilles de style distinctes avec des règles contradictoires et j'ai obtenu les mêmes résultats. Après de nombreuses combinaisons, la seule façon d'obtenir un résultat satisfaisant a été d'utiliser une fonction en ligne <style> dans le bloc <head> avec les règles contradictoires provenant d'un <link> dans le <body> (le corps lui-même était complètement vide, à l'exception de la balise de lien). Même en utilisant une balise style de l'attribut <html> et le chargement de cette feuille de style n'a pas créé le scintillement que j'attendais.
Les repeints sont-ils affectés dans tout ou le résultat final est-il appliqué en une seule fois après le téléchargement de la feuille de style entière et le calcul des règles pour obtenir le résultat final ? Les fichiers CSS sont-ils téléchargés en parallèle avec le HTML lui-même ou le bloquent-ils (comme le font les balises script) ? Comment cela fonctionne-t-il réellement ?
Je ne cherche pas des conseils d'optimisation, mais des références faisant autorité sur le sujet, afin de pouvoir les citer à l'avenir. Il a été très difficile de rechercher ces informations sans tomber sur des tonnes de documents sans rapport. Résumé :
- Tout le contenu du CSS est-il téléchargé avant tout d'elle est appliquée ? (référence s'il vous plaît)
- Comment cela est-il affecté par des choses comme
@import, multiples<link>s, attributs de style en ligne,<style>dans la tête, et différents moteurs de rendu ? - Le téléchargement du contenu CSS bloque-t-il le téléchargement du document HTML lui-même ?
0 votes
Un exemple de la raison pour laquelle je m'intéresse à ce sujet : Je crée un fichier CSS miniaturisé à partir de 10 à 15 petits fichiers. Tout est "namespaced", ou utilise des sélecteurs suffisamment spécifiques pour que l'ordre puisse être interverti dans de nombreux cas. J'ai toujours inclus le CSS "moins pertinent" en dernier, en pensant que les styles seraient appliqué en dernier, et que le fait de les faire passer en premier ferait que les éléments plus importants (mise en page ou classes communes par exemple) seraient évalués plus tard. J'ai le sentiment très fort que cela n'est absolument pas pertinent, mais je cherche des faits pour étayer cette affirmation. Une réponse à cette question devrait également répondre à la question liée.