CSS-objektimallin aloitusopas (CSSOM)
Usein tapahtuu ensimmäinen HTTP-pyyntö ja lopullinen toimitus Web-sivun. Tiedonsiirto ja selaimen renderöintiputki vaativat paljon erilaisia tekniikoita, joista yksi on CSS-objektimalli, tai CSSOM.
CSS Object Model ottaa CSS-koodin ja tekee jokaisen valitsimen osaksi puurakennetta helpottaa jäsentämistä. Ehkä se ei ole välttämätöntä, että kehittäjät ymmärtävät tämän käsitteen täysin, mutta se on arvokas aihe, jos haluat oppia lisää miten selaimet antavat koodin työ sivustoksi.
Tässä viestissä aion kattaa CSS-objektimallin perusteet ja näyttää, miten se toimii.
Mikä on CSSOM?
Termi CSS Object Model kuvaa a Kaikkien CSS-valintakorttien kartta ja kunkin ominaisuuden ominaisuudet. Nämä tyylit voivat olla juurielementtejä tai niissä voi olla sisäkkäisiä lapsia.
CSSOM on hyvin samanlainen kuin DOM HTML: ssä, joka tarkoittaa Document Object Model -ohjelmaa. Molemmat ovat osa kriittinen renderointireitti joka on joukko vaiheita, joiden on tapahduttava tehdä sivusto oikein. Kaikki nämä prosessit tapahtuvat automaattisesti, kulissien takana.
Miksi CSSOM on tärkeä? Se on kartta, jota selain käyttää tehdä CSS-tyylit oikein Web-sivulla. Ei ole helppoa kertoa tietokoneelle, että kaikki kohdat a .main-content div on ylimääräinen rivikorkeus.
Ratkaisu on CSS Object Model, joka kartoittaa kaikki elementit ja ominaisuudet CSS-koodista.
CSSOM helpottaa selaimen käyttöä tehdä tyylit sivulta. Koko asia on hyvin tekninen, mutta se kannattaa ymmärtää hieman prosessista, varsinkin jos luot verkkosivustoja.
Kuinka se toimii
Sekä DOM että CSSOM ovat käyttää kaikkia verkkoselaimia tulkita ja tehdä web-sivuja. Alla oleva kaavio on Googlen kehittäjien Web-perusteiden oppaasta ja selittää, miten DOM annetaan web-selaimessa.
Sekä DOM & CSSOMissa kaikki tiedot ovat muunnettu tavuista digitaalisiksi karttoiksi joka tekee jokaisen elementin Web-asiakirjassa. Prosessi toimii seuraavasti:
- Selain lataa HTML Web-sivulle.
- Käsitellessään HTML: ää jäsennin voi törmätä linkkielementtiin viitataan ulkoiseen tyylitaulukkoon.
- Tämä CSS-tyylitaulukko on sitten kartoitetaan karttaan CSS Object Model -tietojen avulla.
- Tuloksena oleva koodi voi sitten olla DOM: n elementteihin.
Kaikki tämä tapahtuu hyvin nopeasti ja tapahtuu jokaisen yksittäisen sivun pyynnön kanssa. Tämä toinen kaavio esittää alla esimerkiksi CSSOMin puurakenne.
Huomaa, että joissakin kaavion ominaisuuksissa on vaaleampia harmaita kirjasin värejä. Nämä ominaisuudet ovat vanhemmalta. Koska kehossa on tietty kirjasinkoko, kaikki elimen elementit saavat myös kyseisen fonttikoon, ellei se ole ohitettu.
HTML- ja CSS-merkkijonot ovat muunnettu rahakkeiksi joka voi sitten olla ymmärretään solmuina selaimen avulla. Nämä solmut ovat samanlaisia esineitä puurakenteessa joka määrittää, miten koko sivu tulisi rakentaa.
CSSOM ja DOM ovat täysin erilliset tietomallit, siksi he ovat erikseen. Mutta molemmilla on vastaavia puurakenteita, ja molemmat palvelevat samaa tarkoitusta: antavat selaimelle rakenteen, jonka avulla voit tehdä ja tunnistaa sivun eri elementtejä.
Miksi Web-kehittäjien tulisi huolehtia
Koska kaikki renderointi tapahtuu taustalla, sinun ei tarvitse huolehtia paljon CSSOM-puusta. Mutta se voi olla hyödyllistä ymmärtää, miten se toimii.
Yksi asia on muistaa, että CSSOM on täytettävä kokonaan ennen kuin Web-sivu näytetään, sillä se määrittää, miten jokainen sivun elementti näyttää. Jos sivu on ladattu ennen CSSOM-tiedostoa, se näkyy ensin tavallisena HTML-koodina, jonka jälkeen tyylit muutama sekunti myöhemmin.
Selaimet välttävät erityisesti sen, koska se olisi hämmentävää loppukäyttäjille. Ja kannattaa huomata, että CSSOM ei voi tallentaa välimuistiin; sen täytyy olla uudelleen jokaisella sivulla.
Todelliset CSS-tiedostot voidaan tallentaa välimuistiin, jotta varat voidaan ladata nopeammin, mutta tehdä sivu selaimessa vaatii aina CSSOM-jäsentimen suorittamisen. Tämä tarkoittaa myös sitä, että JavaScript voi vaikuttaa kielteisesti renderöintiin ja suorituskykyyn.
Suosittelen, että luet tämän artikkelin oppiaksesi lisää ulkoisista CSS / JS-resursseista ja niiden latausajoista.
Paras tapa optimoida sivustosi on luoda a luonnollinen kaskadi resursseja ladataan samanaikaisesti.
CSSOMia on mahdollista manipuloida JavaScriptin avulla, koska se on teknisesti JS API. Mutta se ei palvele paljon tarkoitusta verrattuna JavaScript DOM manipulointiin.
Suurempi syy oppia CSSOMista on kasvattaa itseämme siitä, miten sivustot todella toimivat.
On paljon asioita, joita pidämme itsestäänselvyytenä, että Internet pysyy sujuvana. Kun ymmärrät hieman enemmän koko prosessista, voit visualisoida, miten koko asia tulee yhteen, ja toivottavasti saamme arvostusta World Wide Webin olemassaolosta.
Lue lisää
Toivon, että tämä intro voi antaa sinulle vankan käsityksen siitä, mitä CSS Object Model on, ja miten se vaikuttaa Web-sivuihin. siellä ei ole paljon manipuloida CSSOMissa, joten se eroaa hieman DOM: sta.
Kuitenkin se on edelleen kriittinen teknologia web-kehityksessä, ja sen pitäisi selventää selaimen renderöinnin tärkeimmät näkökohdat.
CSSOMista keskustellaan monista muista resursseista ja siitä, miten se toimii. Jos haluat lisätietoja, tässä on joitakin suosituksia, joita suosittelen:
- CSS-objektimallin yleiskatsaus
- CSSOMin tutkiminen: CSS-objektianalysaattorin tekeminen
- Mitä jokaisen Frontend-kehittäjän tulisi tietää verkkosivujen renderoinnista
