Водич за почетнике за ЦССОМ објектни модел (ЦССОМ)
Много се догоди између први ХТТП захтев анд тхе Завршни достава веб странице. Пренос података и цевовод за приказивање претраживача захтевају много различитих технологија, једна од њих је ЦСС Објецт Модел, или ЦССОМ.
ЦСС Објецт Модел узима ЦСС код и приказује сваки селектор у структуру дрвета за лакше парсирање. Можда није од кључног значаја за програмере да у потпуности разумију овај концепт, али то је вриједна тема за проучавање ако желите да сазнате више о томе како претраживачи приказују код у радном веб сајту.
У овом посту ћу покрити основе ЦСС Објецт модела и показати вам како ради.
Шта је ЦССОМ?
Термин ЦСС Објецт Модел описује а мапа свих ЦСС селектора и релевантних својстава за сваки селектор. Ови стилови могу бити коријенски елементи или угњеждена дјеца.
ЦССОМ је веома сличан ДОМ у ХТМЛ-у, што представља Доцумент Објецт Модел. Оба су део критична путања приказивања што је низ корака који се морају догодити правилно приказивање веб локације. Сви ови процеси се дешавају аутоматски, иза сцене.
Зашто је ЦССОМ важан? То је мапа коју претраживач користи исправно приказати ЦСС стилове на веб страници. Нема једноставног начина да кажете компјутеру да су сви одломци у а .главни садржај див мора имати додатну висину линије.
Решење је ЦСС Објецт Модел који мапира све елементе и својства из ЦСС кода.
ЦССОМ олакшава прегледачу приказати стилове на страници. Читава ствар је веома техничка, али вреди мало разумети процес, поготово ако градите сајтове.
Како то ради
И ДОМ и ЦССОМ су све веб претраживаче за тумачење и приказивање веб страница. Дијаграм испод је из водича Гоогле Фундаменталс за Веб програмере и објашњава како ДОМ се приказује у веб прегледачу.
И у ДОМ & ЦССОМ, све информације су претвара из бајтова у дигиталне мапе који приказују сваки елемент у веб документу. Процес ради на следећи начин:
- Прегледач преузима ХТМЛ за веб страницу.
- Приликом обраде ХТМЛ-а, парсер може налетјети на елемент везе референцирање спољне табеле стилова.
- Ова ЦСС стилска табела је тада рашчланити на мапу помоћу спецификација ЦСС Објецт Модел.
- Резултирајући код може бити примењује се на елементе у ДОМ-у.
Све се то дешава веома брзо и догађа се са сваким захтевом странице. Овај други дијаграм испод приказује структура стабла ЦССОМ-а.
Обратите пажњу на то како нека својства у дијаграму имају светлије сиве боје. Ова својства су наслеђене од родитеља. Пошто тело има одређену величину фонта, сви елементи унутар тела такође добијају величину фонта, осим ако се не промени.
ХТМЛ и ЦСС стрингови су претворено у токене што онда може бити схваћени као чворови од стране претраживача. Ови чворови су као објеката унутар структуре дрвета који дефинише како треба да се направи читава страница.
ЦССОМ и ДОМ су потпуно засебне моделе података, стога су они анализирани одвојено. Али обоје имају сличне структуре дрвета, и оба служе истој сврси: дају прегледачу структуру за приказивање и идентификацију различитих елемената на страници.
Зашто веб програмери треба да брину
Од целог приказа се дешава на позадини, стварно не морате много бринути о ЦССОМ стаблу. Али може бити корисно разумети како то функционише.
Једна ствар коју треба запамтити је да ЦССОМ мора бити потпуно учитан пре него што се веб страница прикаже, јер ће дефинисати како сваки елемент на страници треба да изгледа. Ако се страница учитана прије ЦССОМ-а, прво би се појавила као обичан ХТМЛ, након чега слиједе стилови неколико секунди касније.
То се посебно избегава зато што би то било збуњујуће за крајње кориснике. И вреди напоменути да је ЦССОМ не може да се кешира; мора бити поново на свакој страници.
Стварне ЦСС датотеке могу се кеширати да би се брже учитале, али приказивање странице у претраживачу увек захтева покретање ЦССОМ парсера. То такође значи да ЈаваСцрипт може имати негативан утицај на приказивање и перформансе.
Препоручујем вам да прочитате овај чланак да бисте сазнали више о спољним ЦСС / ЈС ресурсима и времену учитавања.
Најбољи начин да оптимизујете свој сајт јесте прављење а природна каскада средстава се учитавају у тандему.
Могуће је манипулисати ЦССОМ-ом користећи ЈаваСцрипт јер је технички ЈС АПИ. Али то не служи много у односу на ЈаваСцрипт манипулацију.
Већи разлог за сазнање о ЦССОМ-у је да се додатно едукујете о томе како сајтови заиста функционишу.
Постоји много ствари које узимамо здраво за готово и које воде интернет без проблема. Када мало боље разумете цео процес, можете да визуализујете како се све то зближава и надамо се да ћете стећи одређену захвалност за постојање светске мреже.
Додатна литература
Надам се да вам овај увод може пружити солидну идеју о томе шта је ЦСС Објецт Модел, и како то утиче на веб странице. Тамо није много за манипулацију у ЦССОМ-у, тако да се мало разликује од ДОМ-а.
Ипак, то је и даље критична технологија у веб развоју, и требало би да разјасни главне аспекте рендеринга претраживача.
Постоји много других ресурса о ЦССОМ-у и начину на који он функционише. Ако желите да сазнате више, ево неколико постова које препоручујем:
- ЦСС Објецт Модел Овервиев
- Истраживање ЦССОМ-а: Израда ЦСС анализатора објеката
- Шта сваки фронтенд програмер треба да зна о Веб Рендеринг-у
