Посібник для початківців для об'єктної моделі CSS (CSSOM)
Багато відбувається між перший HTTP-запит і остаточна доставка веб-сторінки. Для передачі даних і трубопроводу візуалізації браузера потрібно багато різних технологій, один з яких - це Об'єктна модель CSS, або CSSOM.
Об'єктна модель CSS приймає код CSS і надає кожному селектору в деревоподібну структуру для більш легкого аналізу. Можливо, для розробників не є принципово розумінням цієї концепції, але це важлива тема для вивчення, якщо ви хочете дізнатися більше про це як браузери надають код на робочий веб-сайт.
У цій посаді я розповім про основи об'єктної моделі CSS і покажу вам, як він працює.
Що таке CSSOM?
Термін CSS Object Model описує a карта всіх селекторів CSS та відповідних властивостей для кожного селектора. Ці стилі можуть бути кореневими елементами або мати вкладені діти.
CSSOM дуже схожий на DOM у форматі HTML, що означає "Об'єктна модель документа". Обидва вони є частиною критичний шлях візуалізації це ряд кроків, які повинні відбутися належним чином відображати веб-сайт. Всі ці процеси відбуваються автоматично, за сценою.
Чому ж CSSOM важливий? Це карта, яку використовує браузер правильно відображати стилі CSS на веб-сторінці. Немає простого способу повідомити комп'ютер, що всі абзаци в a .основний зміст div повинен мати додаткову висоту рядка.
Рішенням є об'єктна модель CSS, яка відображає всі елементи та властивості з вашого CSS-коду.
CSSOM полегшує для браузера візуалізувати стилі на сторінці. Все це дуже технічно, але варто розуміти трохи про цей процес, особливо якщо ви створюєте веб-сайти.
Як це працює
І DOM, і CSSOM є широко використовуються всіма веб-браузерами для інтерпретації та відтворення веб-сторінок. Нижче наведена діаграма з посібника Google Web Fundamentals і пояснює, як DOM відображається у веб-переглядачі.
В обох DOM & CSSOM вся інформація перетворюються з байтів у цифрові карти які відображають кожен елемент у веб-документі. Процес працює наступним чином:
- Браузер завантажує HTML для веб-сторінки.
- Під час обробки HTML, синтаксичний аналізатор може врізатися в елемент посилання посилання на зовнішню таблицю стилів.
- Дана таблиця стилів CSS проаналізовано на карті з використанням специфікацій об'єктної моделі CSS.
- Отриманий код може бути застосовується до елементів у DOM.
Все це відбувається дуже швидко і відбувається з кожним запитом на одну сторінку. Ця інша схема наведена нижче Приклад деревної структури CSSOM.
Зауважте, що деякі властивості діаграми мають більш світлі сірі кольори шрифтів. Ці властивості є успадковані від батьків. Оскільки тіло має певний розмір шрифту, всі елементи в тілі також отримують розмір шрифту, якщо він не перевизначений.
Рядки HTML і CSS перетворюються в токени що може бути розуміються як вузли браузером. Ці вузли схожі об'єкти в структурі дерева що визначає спосіб створення всієї сторінки.
CSSOM і DOM повністю окремих моделей даних, тому вони є проаналізовано окремо один від одного. Але вони обидва подібні деревоподібні структури, і обидва служать одній і тій самій меті: надають браузеру структуру для візуалізації та ідентифікації різних елементів сторінки.
Чому веб-розробники повинні піклуватися
Так як всі рендеринга відбувається на сервері, Вам дійсно не потрібно багато турбуватися про дерево CSSOM. Але може бути корисно зрозуміти, як це працює.
Слід пам'ятати, що CSSOM повинен бути повністю завантажений перед тим, як відобразиться веб-сторінка, оскільки вона визначатиме, як повинен виглядати кожен елемент на сторінці. Якщо сторінка, завантажена перед CSSOM, спочатку з'явиться як звичайний HTML, за якими йдуть стилі за кілька секунд.
Браузери спеціально уникають цього, оскільки це буде заплутати користувачів. І варто відзначити, що CSSOM неможливо кешувати; це повинно бути відтворено на кожній сторінці.
Фактичні файли CSS можна кешувати для швидшого завантаження активів, а також для перегляду сторінки у веб-переглядачі завжди вимагає запуску синтаксичного аналізу CSSOM. Це також означає, що JavaScript може негативно вплинути на рендеринг і продуктивність.
Дуже рекомендую прочитати цю статтю, щоб дізнатися більше про зовнішні ресурси CSS / JS та час їх завантаження.
Найкращий спосіб оптимізувати свій сайт - це створення природний каскад ресурсів, які завантажуються в тандемі.
Можна маніпулювати CSSOM за допомогою JavaScript, тому що це технічно API JS. Але це не слугує великої мети порівняно з JavaScript маніпуляцією.
Більш важлива причина дізнатися про CSSOM полягає в тому, щоб далі виховувати себе, як насправді працюють веб-сайти.
Є багато речей, які ми вважаємо само собою зрозумілим, що підтримує безперебійну роботу Інтернету. Коли ви розумієте трохи більше про весь процес, ви можете уявити, як все це відбувається разом, і сподіваємося отримати певну вдячність за існування Всесвітньої мережі.
Подальше читання
Я сподіваюся, що цей вступ може дати вам тверду ідею про те, що таке об'єктна модель CSS, і як вона впливає на веб-сторінки. Там не дуже маніпулювати в CSSOM, тому він трохи відрізняється від DOM.
Однак це все ще критична технологія в веб-розробці, і вона повинна роз'яснити основні аспекти візуалізації браузера.
Є багато інших ресурсів, що обговорюють CSSOM, і як він працює. Якщо ви хочете дізнатися більше, ось деякі поради, які я рекомендую:
- Огляд об'єктної моделі CSS
- Дослідження CSSOM: Створення аналізатора об'єктів CSS
- Що кожен розробник Frontend повинен знати про візуалізацію веб-сторінок
