Ghidul pentru începători pentru modelul de obiecte CSS (CSSOM)

Se întâmplă multe între prima cerere HTTP si livrare finală a unei pagini web. Transmisia de date și conducta de redare a browserului necesită o mulțime de tehnologii diferite, una dintre ele fiind Modelul de Obiect CSS, sau CSSOM.

Modelul Obiect CSS ia codul CSS și face fiecare selector într-o structură de copac pentru o parsare mai ușoară. Poate că nu este esențial ca dezvoltatorii să înțeleagă pe deplin acest concept, dar este un subiect valoros pentru a studia dacă doriți să aflați mai multe despre modul în care browserele fac cod într-un site web de lucru.

În acest post, voi acoperi elementele de bază ale Modelului Obiect CSS și vă voi arăta cum funcționează.

Ce este CSSOM?

Termenul de Obiect Model CSS descrie a hartă a tuturor selectorilor CSS și proprietăți relevante pentru fiecare selector. Aceste stiluri pot fi elemente de rădăcină sau au copii imbricați.

CSSOM este foarte asemănătoare cu DOM în HTML, care reprezintă modelul Object Document. Ambele fac parte din cale de redare critică care este o serie de măsuri care trebuie să se întâmple face în mod corespunzător un site web. Toate aceste procese se întâmplă automat, în spatele scenelor.

De ce este important CSSOM? Este harta pe care browserul o folosește face corect stilurile CSS pe o pagină web. Nu există nici o modalitate ușoară de a spune unui computer că toate paragrafele dintr-un .conținut principal div trebuie să aibă o înălțime suplimentară a liniei.

Soluția este Modelul de Obiect CSS care hărțuiește toate elementele și proprietățile din codul CSS.

CSSOM facilitează browserul reda stiluri pe pagină. Totul este foarte tehnic, dar merită să înțelegeți puțin despre proces, mai ales dacă construiți site-uri web.

Cum functioneaza

Atât DOM, cât și CSSOM sunt utilizat extensiv de toate browserele web pentru a interpreta și a face pagini web. Diagrama de mai jos este prezentată în ghidul Google Developers Web Fundamentals și explică modul în care DOM este redat într-un browser web.

În DOM și CSSOM, toate informațiile sunt convertite de octeți în hărți digitale care fac fiecare element dintr-un document web. Procesul funcționează după cum urmează:

1. Browserul descarcă codul HTML pentru o pagină web.
2. În timp ce procesează codul HTML, parserul poate intra într-un element de legătură referindu-se la o foaie de stiluri externe.
3. Această foaie de stil CSS este atunci analizat într-o hartă utilizând specificațiile modelului Obiect CSS.
4. Codul rezultat poate fi atunci aplicată elementelor din DOM.

Toate acestea se întâmplă foarte repede și se întâmplă cu fiecare cerere de pagină. Această altă diagramă de mai jos prezintă un structură arborescentă a CSSOM.

Observați cum unele proprietăți din diagramă au culori mai deschise de culoare gri. Aceste proprietăți sunt moștenit de la părinte. Deoarece corpul are o dimensiune specifică a fontului, toate elementele din corp primesc și acea dimensiune a fontului, dacă nu este suprascrisă.

Șirurile HTML și CSS sunt transformate în tokenuri care poate fi atunci intelese ca noduri de browser. Aceste noduri sunt similare obiecte din structura arborelui care definește cum trebuie construită întreaga pagină.

CSSOM și DOM sunt complet modele de date separate, de aceea sunt analizate separat unele de altele. Dar amândoi au structuri similare ale copacilor, și ambele servesc aceluiași scop: oferind browser-ului o structură care să facă și să identifice diferite elemente pe pagină.

De ce dezvoltatorii web ar trebui să aibă grijă

Deoarece toate redarea se întâmplă pe backend, nu trebuie să vă faceți griji prea mult despre arborele CSSOM. Dar poate fi util să înțelegi cum funcționează.

Un lucru de reținut este faptul că CSSOM trebuie încărcat complet înainte ca pagina web să fie afișată, deoarece va defini modul în care ar trebui să arate fiecare element din pagină. Dacă pagina încărcată înainte de CSSOM, va apărea mai întâi ca HTML simplu, urmată de stiluri câteva secunde mai târziu.

Navigatorii evită acest lucru, deoarece ar fi confuz pentru utilizatorii finali. Și merită remarcat faptul că CSSOM nu pot fi stocate în cache; trebuie să fie recreate pe fiecare pagină.

Actualmente, fișierele CSS pot fi stocate în memoria cache pentru a încărca mai rapid materialele, dar pentru redarea unei pagini în browser necesită întotdeauna rularea parserului CSSOM. Acest lucru înseamnă, de asemenea, că JavaScript poate avea un impact negativ asupra randării și performanței.

Vă recomandăm să citiți acest articol pentru a afla mai multe despre resursele externe CSS / JS și timpul lor de încărcare.

Cel mai bun mod de a optimiza site-ul dvs. este prin crafting a cascadă naturală a resurselor care sunt încărcate în tandem.

Este posibil să manipulați CSSOM folosind JavaScript, deoarece este punct de vedere tehnic JS API. Dar nu serveste mult de un scop comparativ cu manipularea JavaScript DOM.

Motivul mai mare pentru a afla mai multe despre CSSOM este să vă educați în continuare despre modul în care funcționează site-urile web.

Există o mulțime de lucruri pe care le considerăm de la sine încât păstrează funcționarea fără probleme a Internetului. Când înțelegeți mai mult despre întregul proces, puteți vizualiza modul în care totul se reunește și, sperăm, obține o apreciere pentru existența World Wide Web.

Citirea în continuare

Sper că acest intro vă poate oferi o idee solidă despre ce este modelul de obiect CSS și cum afectează paginile web. Acolo nu este mult de manipulat în CSSOM, deci diferă puțin de DOM.

Cu toate acestea, este totuși o tehnologie critică în dezvoltarea web și ar trebui să clarifice aspectele majore ale redării browserului.

Există multe alte resurse care discută despre CSSOM și cum funcționează. Dacă doriți să aflați mai multe, iată câteva postări pe care le recomand:

• Prezentare generală a modelului de obiecte CSS
• Explorarea CSSOM: Efectuarea unui analizor de obiecte CSS
• Ce trebuie să știți fiecare dezvoltator de Frontend despre redarea paginilor web