hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Le guide des débutants sur le CSS Object Model (CSSOM)

Il se passe beaucoup de choses entre la première requête HTTP et la livraison finale d'une page Web. La transmission de données et le pipeline de rendu du navigateur requièrent beaucoup de technologies différentes, dont le CSS Object Model ou le CSSOM .

Le CSS Object Model prend le code CSS, et rend chaque sélecteur dans une structure arborescente pour faciliter l'analyse. Peut-être n'est-il pas crucial pour les développeurs de bien comprendre ce concept, mais c'est un sujet intéressant à étudier si vous voulez en savoir plus sur la façon dont les navigateurs rendent le code dans un site Web fonctionnel .

Dans ce post, je vais couvrir les bases du CSS Object Model, et vous montrer comment cela fonctionne.

Qu'est-ce que CSSOM?

Le terme CSS Object Model décrit une carte de tous les sélecteurs CSS et des propriétés pertinentes pour chaque sélecteur . Ces styles peuvent être des éléments racine ou avoir des enfants imbriqués.

CSSOM est très similaire au DOM en HTML, qui signifie Document Object Model. Les deux font partie du chemin de rendu critique qui est une série d'étapes qui doivent arriver à rendre correctement un site Web . Tous ces processus se déroulent automatiquement, dans les coulisses.

Alors pourquoi le CSSOM est-il important? C'est la carte utilisée par le navigateur pour afficher correctement les styles CSS sur une page Web. Il n'y a pas de moyen facile d'indiquer à un ordinateur que tous les paragraphes d'un div .main-content doivent avoir une hauteur de ligne supplémentaire.

La solution est le modèle objet CSS qui mappe tous les éléments et propriétés de votre code CSS.

CSSOM facilite le rendu des styles sur la page par le navigateur. Le tout est très technique mais il vaut la peine de comprendre un peu le processus, surtout si vous construisez des sites Web.

Comment ça marche

Le DOM et le CSSOM sont largement utilisés par tous les navigateurs Web pour interpréter et afficher des pages Web. Le diagramme ci-dessous provient du guide des principes de base Web de Google Developers et explique comment le modèle DOM est rendu dans un navigateur Web .

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

  1. Le navigateur télécharge le code HTML d'une page Web.
  2. Lors du traitement du code HTML, l'analyseur peut rencontrer un élément de lien référençant une feuille de style externe .
  3. Cette feuille de style CSS est ensuite analysée dans une carte en utilisant les spécifications CSS Object Model.
  4. Le code résultant peut ensuite être appliqué aux éléments dans le DOM .

Tout cela arrive très rapidement, et se produit avec chaque demande de page unique . Cet autre diagramme ci-dessous présente un exemple de structure arborescente du CSSOM .

Notez que certaines propriétés du diagramme ont des couleurs de police plus claires. Ces propriétés sont héritées du parent . Étant donné que le corps a une taille de police spécifique, tous les éléments dans le corps obtiennent également cette taille de police sauf si elle est surchargée.

Les chaînes HTML et CSS sont converties en jetons qui peuvent ensuite être compris comme des nœuds par le navigateur. Ces nœuds sont comme des objets dans la structure arborescente qui définit comment la page entière doit être construite.

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

Pourquoi les développeurs Web devraient prendre soin

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

Une chose à retenir est que le CSSOM doit être entièrement chargé avant que la page Web ne soit affichée, car elle définira comment chaque élément de la page devrait ressembler. Si la page est chargée avant le CSSOM, elle apparaîtra d'abord en HTML brut, suivie des styles quelques secondes plus tard.

Les navigateurs l'évitent spécifiquement car cela créerait de la confusion pour les utilisateurs finaux. Et il est intéressant de noter que le CSSOM ne peut pas être mis en cache ; il doit être recréé sur chaque page .

Les fichiers CSS réels peuvent être mis en cache afin de charger les actifs plus rapidement, mais le rendu d'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 CSS / JS externes et leurs temps de chargement.

La meilleure façon d'optimiser votre site consiste à créer une cascade naturelle de ressources chargées en tandem .

Il est possible de manipuler le CSSOM en utilisant JavaScript car c'est techniquement une API JS. Mais cela ne sert pas à grand-chose par rapport à la manipulation du DOM JavaScript.

La plus grande raison d'apprendre sur le CSSOM est de mieux vous renseigner sur la façon dont les sites fonctionnent réellement.

Il y a beaucoup de choses que nous tenons pour acquises qui permettent à Internet de fonctionner sans problème. Lorsque vous en comprenez un peu plus sur l'ensemble du processus, vous pouvez visualiser la manière dont le tout se déroule et, espérons-le, acquérir une certaine appréciation pour l'existence du World Wide Web.

Lecture supplémentaire

J'espère que cette intro peut vous donner une bonne idée de ce qu'est le CSS Object Model et comment cela affecte les pages web. Il n'y a pas grand chose à manipuler dans le CSSOM, donc ça diffère un peu du DOM.

Cependant, il s'agit toujours d'une technologie critique dans le développement Web, et il devrait clarifier les principaux aspects du rendu du navigateur.

Il y a beaucoup d'autres ressources qui discutent du CSSOM, et comment cela fonctionne. Si vous voulez en savoir plus, voici quelques articles que je recommande:

  • Présentation du modèle d'objet CSS
  • Exploration du CSSOM: création d'un analyseur d'objets CSS
  • Ce que tout développeur Frontend doit savoir sur le rendu de la page Web

5 choses que vous pouvez faire quand quelqu'un vole votre idée

5 choses que vous pouvez faire quand quelqu'un vole votre idée

Le vol d'idées arrive tout le temps dans l'industrie créative. Quand vous arrivez avec quelque chose de frais et excitant qui attire l'attention, il est inévitable que vous serez arraché à un moment donné par d'autres qui cherchent à monter sur les talons de votre succès. Et oui, ça craint.Contrair

(Conseils techniques et de conception)

12 projets de recherche Microsoft étonnants que vous devez voir

12 projets de recherche Microsoft étonnants que vous devez voir

De nombreuses entreprises technologiques ont leur propre division Skunkworks, travaillant sur des projets avancés qui n'ont peut-être rien à voir avec le cœur de l'entreprise, ou sur des idées qui peuvent ou non être envoyées au public. La division skunkworks la plus connue publiquement dans l'industrie de la technologie doit être Google Google, avec des projets célèbres tels que la voiture sans conducteur et Google Glass. Mais nou

(Conseils techniques et de conception)