CSS objekto modelio pradžios vadovas (CSSOM)
Tarp daugelio vyksta daug pirmasis HTTP prašymas ir Paskutinis Pristatymas tinklalapio. Duomenų perdavimui ir naršyklės vaizdavimo vamzdynui reikia daug skirtingų technologijų, viena iš jų yra CSS objekto modelis, arba CSSOM.
CSS objekto modelis paima CSS kodą ir pateikia kiekvieną selektorių į medžio struktūrą lengviau analizuoti. Galbūt tai nėra labai svarbu, kad kūrėjai visiškai suprastų šią koncepciją, bet tai vertinga tema, jei norite sužinoti daugiau kaip naršyklės pateikia kodą į darbo svetainę.
Šiame pranešime ketinu padengti CSS objekto modelio pagrindus ir parodyti jums, kaip jis veikia.
Kas yra CSSOM?
Sąvoka „CSS Object Model“ apibūdina a visų CSS selektorių ir atitinkamų kiekvienos selektoriaus savybių žemėlapis. Šie stiliai gali būti šakniniai elementai arba įdėti vaikai.
CSSOM yra labai panašus į DOM HTML, kuris reiškia „Document Object Model“. Abi jos yra kritinis atvaizdavimo kelias tai yra priemonių, kurios turi įvykti, serija tinkamai pateikti svetainę. Visi šie procesai vyksta automatiškai, Užkuliusiuose.
Tad kodėl CSSOM svarbu? Tai žemėlapis, kurį naudoja naršyklė tinkamai pateikti CSS stilius tinklalapyje. Nėra paprasto būdo pasakyti kompiuteriui, kad visos a .Pagrindinis turinys div turi turėti papildomą linijos aukštį.
Sprendimas yra CSS objekto modelis, kuris vaizduoja visus elementus ir savybes iš savo CSS kodo.
CSSOM palengvina naršyklę pateikti puslapių stilius. Visas dalykas yra labai techninis, bet verta šiek tiek suprasti apie šį procesą, ypač jei sukuriate svetaines.
Kaip tai veikia
Tiek DOM, tiek CSSOM yra plačiai naudoja visos interneto naršyklės interpretuoti ir pateikti tinklalapius. Žemiau esanti diagrama pateikiama iš „Google“ kūrėjų žiniatinklio pagrindų vadovo ir paaiškinama, kaip DOM pateikiamas žiniatinklio naršyklėje.
DOM ir CSSOM yra visa informacija konvertuojami iš baitų į skaitmeninius žemėlapius kad kiekvienas elementas pateikiamas žiniatinklio dokumente. Procesas veikia taip:
- Naršyklė atsisiųsti HTML tinklalapiui.
- Perdirbant HTML, analizatorius gali įsijungti į nuorodos elementą nuorodą į išorinį stilių.
- Tuomet ši CSS stilių lentelė į žemėlapį naudojant CSS objekto modelio specifikacijas.
- Gautas kodas gali būti DOM elementams.
Visa tai vyksta labai greitai ir įvyksta su kiekvienu puslapio prašymu. Šioje kitoje diagramoje pavaizduota CSSOM medžio struktūra.
Atkreipkite dėmesį, kaip kai kurios diagramoje esančios savybės yra šviesesnės, pilkos spalvos. Šios savybės yra iš tėvų. Kadangi kūnas turi konkretų šrifto dydį, visi kūno elementai taip pat gauna tą šrifto dydį, nebent jis būtų viršytas.
HTML ir CSS eilutės yra konvertuojami į žetonus tai gali būti suprantama kaip mazgai naršyklėje. Šie mazgai yra panašūs medžio struktūros objektai kuris apibrėžia, kaip reikia sukurti visą puslapį.
CSSOM ir DOM yra visiškai atskirų duomenų modelių, todėl jie atskirai. Bet jie abu turi panašios medžių struktūros, ir abu turi tą patį tikslą: suteikti naršyklei struktūrą, skirtą pateikti ir identifikuoti įvairius puslapio elementus.
Kodėl žiniatinklio kūrėjai turėtų rūpintis
Nuo visa atvaizdavimo atsitinka „backend“, jums tikrai nereikia nerimauti dėl CSSOM medžio. Tačiau gali būti naudinga suprasti, kaip ji veikia.
Vienas dalykas, kurį reikia prisiminti, yra tai, kad CSSOM turi būti visiškai pakrauta prieš pateikiant tinklalapį, nes jis apibrėžia, kaip kiekvienas puslapio elementas turėtų atrodyti. Jei puslapis įkeltas prieš „CSSOM“, pirmiausia jis pasirodys kaip paprastas HTML, o po kelių sekundžių - stiliai.
Naršyklės specialiai vengia to, nes tai būtų paini galutiniams vartotojams. Ir verta paminėti, kad CSSOM negali būti talpyklos; tai turi būti kiekviename puslapyje.
Faktiniai CSS failai gali būti saugomi, kad būtų galima greičiau įkelti turtą, bet naršyklėje padaryti puslapį visada reikia CSSOM analizatoriaus. Tai taip pat reiškia, kad „JavaScript“ gali turėti neigiamą poveikį atvaizdavimui ir našumui.
Labai rekomenduoju perskaityti šį straipsnį, kad sužinotumėte daugiau apie išorinius CSS / JS išteklius ir jų įkėlimo laiką.
Geriausias būdas optimizuoti savo svetainę yra a natūrali kaskada išteklių yra pakraunamos kartu.
CSSOM galima manipuliuoti naudojant „JavaScript“, nes tai techniškai JS API. Tačiau, palyginti su „JavaScript DOM“ manipuliacija, tai nėra labai svarbi.
Didesnė priežastis sužinoti apie CSSOM yra toliau mokyti save apie tai, kaip internetinės svetainės iš tikrųjų veikia.
Yra daug dalykų, kuriuos mes laikome savaime suprantamu dalyku, kad internetas veiktų sklandžiai. Kai suprantate šiek tiek daugiau apie visą procesą, galite vizualizuoti, kaip visa tai susilieja, ir tikiuosi, kad gausite tam tikrą vertinimą už pasaulinio tinklo egzistavimą.
Papildoma literatūra
Tikiuosi, kad šis intro gali suteikti jums tvirtą idėją, kas yra CSS objekto modelis, ir kaip ji veikia tinklalapius. Ten nėra daug manipuliuoti CSSOM, todėl ji šiek tiek skiriasi nuo DOM.
Tačiau tai vis dar yra labai svarbi interneto kūrimo technologija, ir ji turėtų paaiškinti pagrindinius naršyklės atvaizdavimo aspektus.
Yra daug kitų išteklių, aptariančių CSSOM ir kaip jis veikia. Jei norite sužinoti daugiau, čia yra keletas rekomenduojamų pranešimų:
- CSS objekto modelio apžvalga
- CSSOM tyrimas: CSS objekto analizatoriaus kūrimas
- Ką kiekvienas „Frontend Developer“ turėtų žinoti apie tinklalapių atvaizdavimą
