CSS bloque-t-il l'analyse et le rendu? Une analyse détaillée

CSS Chargement, analyse et application dans l'optimisation des performances de la page Web: un thème clé

Le chargement, l'analyse et l'application de CSS sont les liens clés de l'optimisation des performances du Web. Comprendre ce processus est essentiel pour optimiser le temps de chargement des pages et améliorer l'expérience utilisateur. Ce qui suit explorera l'analyse et le rendu du CSS pour bloquer le DOM et le mécanisme derrière.

CSS Charge et analyse DOM

Dom Parsing

L'analyse

DOM (modèle d'objet de document) fait référence au processus de convertissage du navigateur du flux d'octets HTML reçu dans l'arborescence DOM.

Pendant l'analyse du document HTML, lorsque l'analyseur rencontre des ressources non bloquantes (telles que le script asynchrone), il essaiera de télécharger les ressources parallèles et de continuer à analyser le document en même temps.
• CSS bloque-t-il l'analyse DOM?

CSS lui-même ne bloque pas l'analyse DOM. En d'autres termes, le navigateur continuera d'analyser HTML et de construire un arbre DOM.

Cependant, CSS bloquera le rendu DOM et l'exécution de JavaScript. Cela signifie que bien que l'arbre Dom puisse être construit, le navigateur n'effectuera pas d'opérations de rendu avant d'analyser le CSS pertinent (c'est-à-dire l'arbre CSSOM). Il s'agit de s'assurer que la page s'affiche correctement à l'écran pour éviter de ré-recruter et de reprendre.
• Lorsque le navigateur analyse HTML pour générer l'arborescence DOM, il télécharge également les fichiers CSS parallèles et commence à construire un CSSOM (modèle d'objet CSS). La construction de Dom et CSSOM se produit en même temps, ce qui signifie que le téléchargement et l'analyse de CSS ne bloqueront pas la construction du DOM.

arbre cssom et rendu

arbre cssom

CSSOM (modèle d'objet CSS) est une structure de données parallèle au DOM et contient toutes les informations CSS sur la page. Le navigateur l'utilise pour construire un arbre de rendu.

Lorsque le navigateur rencontre des balises
• ou
, il cessera de rendu, hiérarchirera le chargement et l'analyse CSS et construira un arbre CSSOM.
• <link></link> <style> La construction de l'arbre de rendu

L'arbre de rendu est le résultat de la combinaison de l'arbre Dom et de l'arbre CSSOM, ce qui signifie que le navigateur sera rendu.

Avant que l'arbre CSSOM ne soit terminé, l'arbre de rendu ne peut pas être construit, car l'arbre de rendu nécessite les informations de style de tous les éléments DOM.
• Ce processus peut être représenté par un graphique:

Pourquoi CSS charge-t-il JavaScript?

1. Assurez-vous des calculs de style précis : Si JavaScript essaie de modifier le DOM ou de calculer le style lorsque le CSS n'est pas entièrement chargé et analysé, les informations de style récupérées par JavaScript peuvent être inexactes. Pour éviter cela, le navigateur garantit que tous les CSS pertinents sont chargés et analysés avant l'exécution de JavaScript, de sorte que la récupération de script du style final de l'élément DOM.
Évitez de ré-arrangement et de re-peinture
2. : Si JavaScript est autorisé à exécuter lorsque le CSSOM est incomplet, il peut modifier le DOM en fonction des informations de style incomplètes. Une fois le CSSOM terminé, le navigateur peut avoir besoin de rétablir et de redessiner les éléments rendus pour réduire considérablement l'efficacité du rendu. La dépendance à l'ordre d'analyse
: Pendant l'analyse HTML, lorsque le navigateur rencontre la balise
3. , il commencera immédiatement à charger CSS. Lorsqu'il rencontre des balises (non ou Attributs), il suspendra l'analyse DOM pour exécuter le script. Si le CSS n'est pas entièrement chargé, l'exécution du script peut dépendre des informations de style incomplètes. Par conséquent, le navigateur attend le script avant que CSSOM ne soit prêt. <link href="..." rel="stylesheet"></link> <script> async L'écriture CSS en JavaScript bloquera le rendu DOM? defer
s'il faut écrire un style CSS dans JavaScript bloquera le rendu DOM en fonction de la méthode d'application et du temps du style. Cela implique le processus de rendu du navigateur, en particulier la relation entre JavaScript, CSS et DOM. En discutons en détail:

Modifiez directement le style d'élément

Lorsque le style CSS est directement appliqué en modifiant les attributs

de l'élément DOM en JavaScript (par exemple,

), ces opérations ne bloquent généralement pas l'analyse DOM. Cependant, ils peuvent bloquer le processus de rendu, car le navigateur doit re-calculer le style et déclencher la réintégration et la re-peinture:

style Restaurant element.style.color = 'red';: Lorsque la taille, la structure ou certains attributs de l'élément se produisent, le navigateur doit re-calculer sa position et leur taille.

Draw
• : Lorsque l'apparence visuelle de l'élément change (comme la couleur ou la bordure) mais n'affecte pas sa taille ou sa structure, cela indiquera le navigateur pour re-redélance des éléments.
Insertion dynamique ou
• Label Si JavaScript ajoute dynamiquement
ou

balises à

, cela affectera le rendu: <style>

• Bloc de rendu : Le navigateur doit être suspendu pour analyser les règles CSS nouvellement insérées avant de pouvoir continuer à être rendu. Cela peut entraîner un délai de rendu grave, en particulier lorsque le fichier CSS est grand ou que la condition réseau n'est pas bonne.
Impact de performance
• : Un fonctionnement répété, tel que l'insertion de balises dans le cycle, peut entraîner un rérackage et une re-peinture en double, ce qui affecte sérieusement les performances de la page. <style>
CSS en JavaScript n'est pas correctement obstrué ou retardé DOM Rendu, en particulier lorsque la génération dynamique et le style d'application.

Conclusion

Bien que le chargement CSS ne bloque pas l'analyse DOM, il bloquera le rendu DOM. Le chargement CSS bloquera également le suivi de la suivi du JavaScript.

Nous sommes Leapcell, votre projet hôte Node.js est le premier choix.

---

Leapcell est utilisé pour la garde Web, la tâche asynchrone et la prochaine génération de Redis sans plate-forme de serveur:

Prise en charge multi-language

Utilisez Node.js, Python, Go ou Rust pour le développement.

Déploiement gratuit de projets illimités

Il vous suffit de payer les frais d'utilisation - pas de demande, pas de frais.

Avantages de coûts inégalés

Payés en fonction de l'utilisation, il n'y a pas de coût inactif.

Par exemple: 25 $ prend en charge 6,94 millions de demandes, avec un temps de réponse moyen de 60 millisecondes.

Expérience des développeurs simplifiés

• UI intuitif, paramètres faciles.

Pipeline CI / CD automatique complet et intégration Gitops.

Les indicateurs de temps réel et les enregistrements de journal fournissent des informations opérationnelles.

Expansion facile et haute performance
Extension automatique pour gérer facilement les hauts et la fusion.
Zero Fondements de fonctionnement - Just Focus on Construction.

Apprenez plus d'informations dans le document!

• Suivez notre x: @LeapCellHQ
Lisez notre blog

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!