Ръководство за начинаещи за CSS-модела (CSSOM)

Много се случва между първата HTTP заявка и Крайна доставка на уеб страница. Предаването на данни и тръбопроводът за визуализация на браузъра изискват много различни технологии, един от тях е Модел на CSS обект, или CSSOM.

CSS обектният модел приема CSS кода и прави всеки селектор в дървовидна структура за по-лесен анализ. Може би не е от решаващо значение за разработчиците да разберат напълно тази концепция, но това е ценна тема за изучаване, ако искате да научите повече за нея как браузърите предоставят код в работещ уебсайт.

В тази публикация ще разгледам основите на CSS Object Model и ще ви покажа как работи.

Какво е CSSOM?

Терминът CSS Object Model описва a карта на всички CSS селектори и съответните свойства за всеки селектор. Тези стилове могат да бъдат основни елементи или да имат вложени деца.

CSSOM е много подобен на DOM в HTML, което е за обектния модел на документа. И двете са част от критичен път на визуализация което е поредица от стъпки, които трябва да се случат правилно визуализирате уебсайт. Всички тези процеси се случват автоматично, зад сцената.

Защо е важно CSSOM? Това е картата, използвана от браузъра правилно показват CSS стилове на уеб страница. Няма лесен начин да се каже на компютъра, че всички параграфи в a .главно съдържание div трябва да има допълнителна височина на линията.

Решението е CSS Object Model, който картира всички елементи и свойства от вашия CSS код.

CSSOM улеснява браузъра показват стилове на страницата. Цялото нещо е много технически, но си струва да разберем малко за процеса, особено ако изграждате уебсайтове.

Как работи

Както DOM, така и CSSOM са използвани широко от всички уеб браузъри да тълкувате и визуализирате уеб страници. Диаграмата по-долу е от ръководството на Google Web Fundamentals и обяснява как DOM се визуализира в уеб браузър.

И в DOM & CSSOM, цялата информация е преобразува от байтове в цифрови карти които отразяват всеки елемент в уеб документ. Процесът работи както следва:

1. Браузърът изтегля HTML за уеб страница.
2. Докато обработва HTML, анализаторът може да се натъкне на елемент на връзката рефериране към външна таблица със стилове.
3. Тази CSS стилова таблица е след това анализирано на карта използване на спецификациите на CSS обектния модел.
4. Полученият в резултат код може да бъде прилагани към елементи в DOM.

Всичко това се случва много бързо и се случва с всяка заявка за една страница. Тази друга диаграма по-долу показва примерна дървовидна структура на CSSOM.

Забележете как някои свойства в диаграмата имат по-светли сиви цветове на шрифта. Тези свойства са наследени от родителя. Тъй като тялото има определен размер на шрифта, всички елементи в тялото също получават този размер на шрифта, освен ако не е отменен.

HTML и CSS низовете са конвертирани в символи което може да бъде разбира се като възли от браузъра. Тези възли са подобни обекти в дървовидна структура което определя как трябва да бъде изградена цялата страница.

CSSOM и DOM са напълно отделни модели на данни, следователно те са разгледани поотделно. Но и двете имат подобни дървови структури, и двете служат за една и съща цел: дават на браузъра структура, която да визуализира и идентифицира различни елементи на страницата.

Защо уеб разработчиците трябва да се грижат

Тъй като всички рендеринг се случва на задния панел, наистина не е нужно да се притеснявате много за дървото CSSOM. Но може да е полезно да се разбере как работи.

Едно нещо, което трябва да запомните е, че CSSOM трябва да бъде напълно заредена преди да се покаже уеб страницата, тъй като тя ще определи как трябва да изглежда всеки елемент на страницата. Ако страницата, заредена преди CSSOM, първо се появи като обикновен HTML, следвана от стиловете няколко секунди по-късно.

Браузърите избягват това, защото биха объркали крайните потребители. И си струва да се отбележи, че CSSOM не може да бъде кеширано; трябва да е пресъздадени на всяка страница.

Фактическите CSS файлове могат да бъдат кеширани, за да се зареждат активите по-бързо, но да се визуализира страница в браузъра винаги изисква изпълнението на CSSOM парсера. Това означава също, че JavaScript може да има отрицателно въздействие върху визуализацията и ефективността.

Бих силно препоръчвам да прочетете тази статия, за да научите повече за външните CSS / JS ресурси и времето им на зареждане.

Най-добрият начин да оптимизирате сайта си е като създадете a естествена каскада ресурси са заредени в тандем.

Възможно е да манипулирате CSSOM, използвайки JavaScript, защото това е технически JS API. Но тя не служи много за цел в сравнение с JavaScript DOM манипулация.

По-голямата причина да научите повече за CSSOM е да образовате себе си по отношение на действителното функциониране на уебсайтовете.

Има много неща, които приемаме за даденост и поддържаме интернет безпроблемен. Когато разберете малко повече за целия процес, можете да си представите как се събира цялото нещо и да се надяваме да получим известна оценка за съществуването на Световната мрежа.

Допълнителна информация

Надявам се, че това интро може да ви даде солидна представа за това какво е CSS Object Model и как тя влияе на уеб страниците. Там не е много манипулиране в CSSOM, така че се различава малко от DOM.

Въпреки това тя все още е критична технология в уеб разработката и трябва да изясни основните аспекти на визуализацията на браузъра.

Има много други ресурси, които обсъждат CSSOM и как тя работи. Ако искате да научите повече, ето някои препоръки, които препоръчвам:

• Общ модел на CSS обект
• Изследване на CSSOM: Създаване на CSS анализатор на обекти
• Какво всеки Frontend разработчик трябва да знаете за уеб страница визуализация