Przewodnik dla początkujących do modelu obiektowego CSS (CSSOM)

Wiele się dzieje między pierwsze żądanie HTTP i Ostatnia dostawa strony internetowej. Transmisja danych i potok renderowania przeglądarki wymagają wielu różnych technologii, z których jedna to Model obiektowy CSS, albo CSSOM.

Model obiektowy CSS pobiera kod CSS i renderuje każdy selektor w strukturę drzewa dla łatwiejszego parsowania. Być może nie jest kluczowe dla deweloperów, aby w pełni zrozumieć tę koncepcję, ale jest to cenny temat do zbadania, jeśli chcesz dowiedzieć się więcej na temat w jaki sposób przeglądarki wyświetlają kod w działającej witrynie.

W tym poście omówię podstawy modelu obiektowego CSS i pokażę, jak to działa.

Czym jest CSSOM?

Termin CSS Object Model opisuje a mapa wszystkich selektorów CSS i odpowiednich właściwości dla każdego selektora. Te style mogą być elementami root lub zagnieżdżonymi dziećmi.

CSSOM jest bardzo podobny do DOM w HTML, co oznacza Document Object Model. Oba są częścią krytyczna ścieżka renderowania co jest serią kroków, które muszą się wydarzyć prawidłowo renderować stronę internetową. Wszystkie te procesy się zdarzają automatycznie, za kulisami.

Dlaczego więc CSSOM jest ważny? To mapa używana przez przeglądarkę do prawidłowo renderuj style CSS na stronie internetowej. Nie ma łatwego sposobu, aby powiedzieć komputerowi, że wszystkie akapity w .główna zawartość div musi mieć dodatkową wysokość linii.

Rozwiązaniem jest model obiektowy CSS, który odwzorowuje wszystkie elementy i właściwości z twojego kodu CSS.

CSSOM ułatwia przeglądarkę renderuj style na stronie. Całość jest bardzo techniczna, ale warto zrozumieć trochę o tym procesie, zwłaszcza jeśli budujesz strony internetowe.

Jak to działa

Zarówno DOM, jak i CSSOM są szeroko używane przez wszystkie przeglądarki internetowe interpretować i renderować strony internetowe. Poniższy diagram pochodzi z przewodnika Google Developers Web Fundamentals i wyjaśnia, w jaki sposób DOM jest renderowany w przeglądarce internetowej.

Zarówno w DOM, jak i CSSOM wszystkie informacje są konwertowane z bajtów na mapy cyfrowe które renderują każdy element dokumentu internetowego. Proces działa w następujący sposób:

Przeglądarka pobiera HTML na stronie internetowej.
Podczas przetwarzania kodu HTML parser może wpadać na element łącza odwołanie do zewnętrznego arkusza stylów.
Ten arkusz stylów CSS jest wtedy parsowane na mapę używanie specyfikacji modelu obiektu CSS.
Może to być kod wynikowy zastosowane do elementów w DOM.

Wszystko to dzieje się bardzo szybko i występuje z każdym żądaniem strony. Ten inny diagram poniżej przedstawia przykładowa struktura drzewa CSSOM.

Zauważ, że niektóre właściwości na diagramie mają jaśniejsze szare kolory czcionek. Te właściwości są odziedziczony po rodzicach. Ponieważ ciało ma określony rozmiar czcionki, wszystkie elementy w ciele również otrzymują ten rozmiar czcionki, chyba że jest on nadpisany.

Ciągi HTML i CSS to zamienione na żetony który może być wtedy rozumiane jako węzły przez przeglądarkę. Te węzły są jak obiekty w strukturze drzewa który definiuje, w jaki sposób powinna zostać zbudowana cała strona.

CSSOM i DOM są całkowicie oddzielne modele danych, dlatego są analizowane oddzielnie. Ale oboje mają podobne struktury drzew, i oba służą temu samemu celowi: nadaniu przeglądarce struktury do renderowania i identyfikowania różnych elementów na stronie.

Dlaczego programiści powinni się tym zająć

Od całego renderowania dzieje się na zapleczu, naprawdę nie musisz się martwić o drzewo CSSOM. Ale przydatne może być zrozumienie, jak to działa.

Należy pamiętać, że CSSOM musi być w pełni załadowany zanim strona zostanie wyświetlona, ponieważ określi, jak powinien wyglądać każdy element na stronie. Jeśli strona załadowana przed CSSOM, pojawi się najpierw jako zwykły HTML, a następnie style kilka sekund później.

Przeglądarki tego właśnie unikają, ponieważ byłoby to mylące dla użytkowników końcowych. I warto zauważyć, że CSSOM nie można buforować; to musi być odtworzone na każdej stronie.

Rzeczywiste pliki CSS można buforować w celu szybszego ładowania zasobów, ale renderowania strony w przeglądarce zawsze wymaga uruchomienia parsera CSSOM. Oznacza to również, że JavaScript może mieć negatywny wpływ na renderowanie i wydajność.

Gorąco polecam przeczytanie tego artykułu, aby dowiedzieć się więcej o zewnętrznych zasobach CSS / JS i czasie ich ładowania.

Najlepszym sposobem na zoptymalizowanie witryny jest stworzenie a naturalna kaskada zasobów, które są ładowane w tandemie.

Możliwe jest manipulowanie CSSOM przy użyciu JavaScript, ponieważ technicznie jest to API JS. Ale nie służy to zbytnio celowi w porównaniu z manipulacją JavaScript DOM.

Większy powód, aby dowiedzieć się o CSSOM, to dalsze kształcenie się na temat sposobu działania stron internetowych.

Jest wiele rzeczy, które uważamy za oczywiste, dzięki którym Internet działa płynnie. Kiedy zrozumiesz trochę więcej na temat całego procesu, możesz wyobrazić sobie, w jaki sposób całość się łączy, i miejmy nadzieję, że zdobędziesz uznanie dla istnienia World Wide Web.

Dalsze czytanie

Mam nadzieję, że to wprowadzenie da ci solidne wyobrażenie o tym, czym jest Model Obiektów CSS i jak wpływa na strony internetowe. Tam nie ma zbyt wiele do manipulowania w CSSOM, więc różni się trochę od DOM.

Jest to jednak nadal kluczowa technologia w tworzeniu stron internetowych i powinna wyjaśniać główne aspekty renderowania przeglądarki.

Istnieje wiele innych zasobów omawiających CSSOM i sposób jego działania. Jeśli chcesz dowiedzieć się więcej, oto kilka postów, które polecam:

Przegląd modelu obiektu CSS
Eksploracja CSSOM: Tworzenie analizatora obiektów CSS
Co powinien wiedzieć każdy programista Frontend o renderowaniu strony internetowej