Le Guide du débutant sur le modèle d'objet CSS (CSSOM)

Il se passe beaucoup de choses entre première requête HTTP et le La livraison finale d'une page Web. La transmission de données et le pipeline de rendu du navigateur nécessitent de nombreuses technologies différentes, l’une d’elles étant la Modèle d'objet CSS, ou la CSSOM.

Le modèle d'objet CSS prend le code CSS et rend chaque sélecteur dans une arborescence pour une analyse plus facile. Il n’est peut-être pas crucial pour les développeurs de bien comprendre ce concept, mais c’est un sujet intéressant à étudier si vous souhaitez en savoir plus sur comment les navigateurs rendent le code dans un site Web fonctionnel.

Dans cet article, je vais couvrir les bases du modèle d'objet CSS et vous montrer comment il fonctionne..

Qu'est-ce que CSSOM?

Le terme modèle d'objet CSS décrit un carte de tous les sélecteurs CSS et propriétés pertinentes pour chaque sélecteur. Ces styles peuvent être des éléments racines ou avoir des enfants imbriqués.

CSSOM est très similaire à la DOM en HTML, qui signifie Modèle d'objet de document. Les deux font partie de la chemin de rendu critique qui est une série d'étapes qui doivent arriver à restituer correctement un site web. Tous ces processus se produisent automatiquement, Dans les coulisses.

Alors, pourquoi le CSSOM est-il important? C'est la carte utilisée par le navigateur pour restituer correctement les styles CSS sur une page web. Il n’existe pas de moyen facile de dire à un ordinateur que tous les paragraphes d’un .contenu principal div doit avoir une hauteur de ligne supplémentaire.

La solution est le modèle d'objet CSS qui cartographie tous les éléments et propriétés depuis votre code CSS.

CSSOM facilite la tâche du navigateur. rendre les styles sur la page. Le tout est très technique, mais il est utile de comprendre un peu le processus, surtout si vous créez des sites Web..

Comment ça marche

DOM et CSSOM sont tous deux largement utilisé par tous les navigateurs Web interpréter et rendre les pages Web. Le diagramme ci-dessous est tiré du guide Principes de base de Google Developers Web et explique comment DOM est rendu dans un navigateur Web.

Dans les domaines DOM et CSSOM, toutes les informations sont converti d'octets en cartes numériques qui rendent chaque élément dans un document Web. Le processus fonctionne comme suit:

Le navigateur télécharge le HTML pour une page web.
Lors du traitement du code HTML, l'analyseur peut heurter un élément de lien référencer une feuille de style externe.
Cette feuille de style CSS est alors analysé dans une carte Utilisation des spécifications du modèle d'objet CSS.
Le code résultant peut alors être appliquée aux éléments du DOM.

Tout cela se produit très rapidement et se produit avec chaque demande de page. Cet autre diagramme ci-dessous présente une exemple d'arborescence du CSSOM.

Notez que certaines propriétés du diagramme ont des couleurs de police grises plus claires. Ces propriétés sont hérité du parent. Étant donné que le corps a une taille de police spécifique, tous les éléments du corps obtiennent également cette taille de police à moins qu'elle ne soit remplacée..

Les chaînes HTML et CSS sont converti en jetons qui peut alors être compris comme des nœuds par le navigateur. Ces nœuds sont comme objets dans l'arborescence qui définit comment la page entière doit être construite.

Le CSSOM et le DOM sont complètement modèles de données séparés, donc ils sont analysé séparément les uns des autres. Mais ils ont tous deux structures d'arbres similaires, et les deux servent le même objectif: donner au navigateur une structure pour restituer et identifier différents éléments de la page..

Pourquoi les développeurs Web devraient-ils s'en préoccuper?

Depuis tout le rendu se passe sur le backend, vous n'avez vraiment pas besoin de vous soucier beaucoup de l'arbre CSSOM. Mais il peut être utile de comprendre comment cela fonctionne.

Une chose à retenir est que le CSSOM doit être complètement chargé avant que la page Web ne soit affichée, car elle définira à quoi devrait ressembler chaque élément de la page. Si la page était chargée avant le CSSOM, elle apparaitrait d'abord en HTML simple, suivie des styles quelques secondes plus tard..

Les navigateurs évitent spécifiquement cela parce que cela dérouterait les utilisateurs finaux. Et il est à noter que le CSSOM ne peut pas être mis en cache; ce doit être recréé sur chaque page.

Les fichiers CSS réels peuvent être mis en cache afin de charger les actifs plus rapidement, mais en rendant une page dans le navigateur nécessite toujours l'exécution de l'analyseur CSSOM. Cela signifie également que JavaScript peut avoir un impact négatif sur le rendu et les performances..

Je recommande fortement de lire cet article pour en savoir plus sur les ressources externes CSS / JS et leurs temps de chargement.

Le meilleur moyen d’optimiser votre site est de créer un cascade naturelle de ressources qui sont chargés en tandem.

Il est possible de manipuler le CSSOM à l'aide de JavaScript car il s'agit techniquement d'une API JS. Mais cela ne sert pas à grand chose par rapport à la manipulation JavaScript dans le DOM.

La raison principale pour en apprendre davantage sur le CSSOM est de vous renseigner davantage sur le fonctionnement réel des sites Web..

Il y a beaucoup de choses que nous prenons pour acquis qui assurent le bon fonctionnement d'Internet. Lorsque vous en comprendrez un peu plus sur l'ensemble du processus, vous pourrez visualiser comment tout se déroule et, éventuellement, mieux comprendre l'existence du World Wide Web..

Lectures complémentaires

J'espère que cette introduction vous donnera une idée précise du modèle d'objet CSS et de son incidence sur les pages Web. Là pas grand chose à manipuler dans le CSSOM, il diffère donc un peu du DOM.

Cependant, il s’agit toujours d’une technologie essentielle pour le développement Web et elle devrait clarifier les principaux aspects du rendu du navigateur..

Il existe de nombreuses autres ressources sur le CSSOM et son fonctionnement. Si vous souhaitez en savoir plus, voici quelques articles que je vous recommande:

Présentation du modèle d'objet CSS
Explorer le CSSOM: Créer un analyseur d'objet CSS
Ce que tout développeur frontend devrait savoir sur le rendu de page Web