CSS objektu modeļa (CSSOM) iesācēju ceļvedis
Starp pirmais HTTP pieprasījums un galīgā piegāde no tīmekļa lapas. Datu pārraidei un pārlūkprogrammas atveidošanas cauruļvadam ir nepieciešama daudz dažādu tehnoloģiju, viena no tām ir CSS objekta modelis, vai CSSOM.
CSS objekta modelis ņem CSS kodu un padara katru selektoru uz koka struktūru vieglāk parsēt. Iespējams, tas nav svarīgi, lai izstrādātāji pilnībā saprastu šo koncepciju, bet tas ir vērtīgs temats, lai uzzinātu vairāk, ja vēlaties uzzināt vairāk kā pārlūkprogrammas sniedz kodu darba vietnē.
Šajā ziņojumā es pievērsīšos CSS objekta modeļa pamatiem un parādīšu, kā tas darbojas.
Kas ir CSSOM?
Termins CSS Object Model apraksta a visu CSS selektoru karte un katram selektoram atbilstošās īpašības. Šie stili var būt saknes elementi vai iekļauti bērni.
CSSOM ir ļoti līdzīgs DOM HTML, kas apzīmē dokumentu objekta modeli. Abi no tiem ir daļa no kritisko atveidošanas ceļu kas ir virkne pasākumu, kas ir jāveic pareizi padarīt tīmekļa vietni. Visi šie procesi notiek automātiski, aizkadrā.
Kāpēc CSSOM ir svarīga? Tā ir karte, ko pārlūks izmanto pareizi padarīt CSS stilus Web lapā. Nav viegli pateikt datoram, ka visi punkti a .galvenais saturs div ir jābūt papildus līnijas augstumam.
Risinājums ir CSS objekta modelis, kas iezīmē visus elementus un īpašības no CSS koda.
CSSOM atvieglo pārlūkprogrammas darbību padarīt stilus lapā. Visa lieta ir ļoti tehniska, taču par procesu ir vērts mazliet saprast, it īpaši, ja veidojat tīmekļa vietnes.
Kā tas strādā
Gan DOM, gan CSSOM ir plaši izmanto visas tīmekļa pārlūkprogrammas interpretēt un padarīt tīmekļa lapas. Turpmāk redzamā diagramma ir no Google izstrādātāju tīmekļa pamatu rokasgrāmatas un izskaidro, kā DOM tiek sniegts tīmekļa pārlūkprogrammā.
Gan DOM, gan CSSOM ir visa informācija konvertē no baitiem uz digitālajām kartēm kas padara katru Web dokumenta elementu. Process darbojas šādi:
- Pārlūks lejupielādē HTML Web lapu.
- Pārstrādājot HTML, parsētājs var sasist saiti elementā atsauce uz ārējo stilu.
- Šī CSS stila lapa ir tad kartē izmantojot CSS Object Model specs.
- Rezultātā iegūtais kods var būt DOM elementiem.
Tas viss notiek ļoti ātri un notiek katram lapas pieprasījumam. Šī nākamā diagramma atspoguļo piemēram, CSSOM koka struktūra.
Ievērojiet, kā dažām diagrammas īpašībām ir gaišākas pelēkas fonta krāsas. Šīs īpašības ir mantojis no vecākiem. Tā kā ķermenim ir īpašs fonta lielums, visi ķermeņa elementi arī saņem šo fontu lielumu, ja vien tas nav pārsniegts.
HTML un CSS virknes ir pārveidoti žetonos kas var būt saprot kā mezglus pārlūks. Šie mezgli ir līdzīgi objektus koka struktūrā kas nosaka, kā jāizveido visa lapa.
CSSOM un DOM ir pilnīgi atsevišķus datu modeļus, tāpēc viņi ir atsevišķi. Bet viņi abi ir līdzīgas koka struktūras, un abi kalpo tam pašam mērķim: dodot pārlūkam struktūru, lai padarītu un identificētu dažādus lapas elementus.
Kāpēc Web izstrādātājiem vajadzētu rūpēties
Tā kā viss atveidojums notiek backend, jums tiešām nav jāuztraucas par CSSOM koku. Bet tas var būt noderīgi saprast, kā tas darbojas.
Viena lieta, kas jāatceras, ir tā, ka CSSOM jābūt pilnībā ielādētam pirms tiks parādīta tīmekļa lapa, jo tā noteiks, kā izskatās katrs lapas elements. Ja lapa ielādēta pirms CSSOM, vispirms tā parādīsies kā vienkāršs HTML, pēc tam pēc dažām sekundēm seko stili.
Pārlūkprogrammas īpaši izvairās no tā, jo tas būtu neskaidrs gala lietotājiem. Un ir vērts atzīmēt, ka CSSOM nevar saglabāt kešatmiņu; tam jābūt katrā lapā.
Faktiskos CSS failus var saglabāt kešatmiņā, lai ielādētu aktīvus ātrāk, bet padarītu lapu pārlūkprogrammā vienmēr ir nepieciešams CSSOM parsētājs. Tas nozīmē arī to, ka JavaScript var negatīvi ietekmēt izciršanu un veiktspēju.
Es ļoti iesakām izlasīt šo rakstu, lai uzzinātu vairāk par ārējiem CSS / JS resursiem un to ielādes laiku.
Labākais veids, kā optimizēt jūsu vietni, ir veidot a dabas kaskāde resursiem tiek ielādēti tandēmā.
CSSOM ir iespējams manipulēt, izmantojot JavaScript, jo tas ir tehniski JS API. Bet tas nav lielā mērā noderīgs, salīdzinot ar JavaScript DOM manipulācijām.
Lielāks iemesls, lai uzzinātu par CSSOM, ir tālāk izglītot sevi par to, kā mājas lapas faktiski darbojas.
Ir daudzas lietas, kuras mēs uzskatām par pašsaprotamām, lai internets darbotos nevainojami. Ja jūs nedaudz vairāk saprotat par visu procesu, jūs varat iztēloties, kā visa lieta sanāk kopā, un, cerams, iegūs zināmu atzinību par World Wide Web pastāvēšanu..
Turpmāka lasīšana
Es ceru, ka šis intro var sniegt jums skaidru priekšstatu par CSS objekta modeli un to, kā tā ietekmē tīmekļa lapas. Tur nav daudz, lai manipulētu ar CSSOM, tāpēc tas nedaudz atšķiras no DOM.
Tomēr tā joprojām ir kritiska tīmekļa izstrādes tehnoloģija, un tai būtu jāprecizē pārlūkprogrammas izciršanas galvenie aspekti.
Ir daudz citu resursu, kas apspriež CSSOM un kā tas darbojas. Ja vēlaties uzzināt vairāk, šeit ir daži ieteikumi:
- CSS objekta modeļa pārskats
- CSSOM izpēte: CSS objektu analizatora izveide
- Kas katram Frontend Developer jāzina par tīmekļa lapu atveidošanu
