CSSOM Nedir? Bilmeniz Gerekenler!

CSSOM Nedir?

  • CSSOM, CSS Nesne Modeli anlamına gelmektedir.
  • Temelde bir web sayfasında bulunan CSS stillerinin bir “haritası” dır.
  • DOM’a çok benzer, ancak HTML yerine CSS için.
  • CSS ile birleştirilen CSSOM, tarayıcılar tarafından web sayfalarını görüntülemek için kullanılır.

CSSOM, bir sayfa görüntüleme için çok önemlidir.

Kritik oluşturma yolunun temel ve çekirdek bir parçasıdır ve yaptıklarının anlaşılması web performans optimizasyonunun önemli bir parçasıdır (web sayfalarının daha hızlı yüklenmesini sağlar).

CSSOM ne yapar?

Stil sayfanızdaki kuralları, sayfada styling gereken şeylerle eşleştirir.

CSSOM bunu yapmak için çok karmaşık adımlar atıyor ancak CSSOM’un son işlevi, stilleri, stillerin gitmesi gereken yerlere haritalamaktır.

(Daha doğrusu, CSSOM belirteçleri tanımlar ve bunları bir ağaç yapısına bağlanan düğümlere örter. Tüm düğümlerin tüm haritalarının bir sayfanın ilişkili stilleri ile birlikte tümü CSS Nesne Modeli olur).

Web tarayıcıları bir sayfayı oluşturmak için CSSOM kullanıyor

Web sayfanızı görüntülemek için bir web tarayıcısı birkaç adım atmalıdır 1. Şu an için biraz basitleştireceğiz ve CSSOM’un önemini gösterecek dört ana adımdan söz edeceğiz …

  1. Web tarayıcısı HTML’nizi inceler ve DOM (Belge Nesnesi Modeli) oluşturur.
  2. Web tarayıcısı CSS’nizi inceler ve CSSOM (CSS Nesne Modeli) oluşturur.
  3. Web tarayıcısı bir render ağacı oluşturmak için DOM ve CSSOM’u birleştirir.
  4. Web tarayıcısı web sayfanızı görüntüler.

Yukarıdaki adımlarda da görebileceğiniz gibi, CSSOM gerçekten bir web sayfasını görüntülemenin önemli bir parçasıdır.

İyi haberler

Web sayfalarınızı optimize etmek için CSSOM’un nasıl çalıştığını anlamanız gerekmez.

Yapılabilecek çok gerçek Sayfa Hızı optimizasyonlarından yararlanmak için CSSOM hakkında bir webmaster’ın bilmek istediği birkaç önemli nokta vardır.

  1. CSSOM’un bir şey oluşturmasını engellediğini bilin.
  2. CSSOM’un her yeni sayfa yüklediğinizde oluşturulması gerektiğini bilin.
  3. Sayfanızın yüklediği CSS ile sayfanızın yüklediği javascript arasında bir ilişki olduğunu bilin.

Bu noktaların her birine hızla göz atalım ve sayfalarımızı geliştirmek için neler yapabileceğimize gideceğiz …

1. CSSOM, görüntü oluşturmadan herhangi bir şey engelliyor

Tüm CSS’ler engelleniyor (CSS ele alınana kadar hiçbir şey görüntülenmiyor).

Bunun nedeni, tarayıcı CSS incelendikten önce web sayfası içeriğini gösterecek olsaydı, ziyaret ettiğiniz her web sayfası unstyled görülecekti ve sonra birkaç dakika sonra stil sahibi olmaya başlardı ve her şey bir kötü bir deneyim. Korkunç görünüyordu.

CSSOM render ağacının oluşturulmasına yardımcı olduğu için CSS’nin bir web sayfasında nasıl kullanılacağı verimli bir şekilde yapılmazsa çok ciddi sonuçları vardır.

Ana sonuç, web sayfanız yüklenirken boş bir ekran.

2. CSSOM her yeni sayfa yüklediğinizde inşa edilmelidir

Bu sizin için açık gözükebilir veya olmayabilir, ancak bu çok önemli bir noktadır.

Bu, CSS’niz önbelleğe alınmış olsa bile, bu CSSOM’un her sayfa için oluşturulduğu anlamına gelmez.

CSSOM, bir kullanıcı sayfalarınızdan birine gittiğinde tekrar oluşturulmalıdır (tarayıcı zaten gerekli tüm CSS’leri önbelleğe almış olmasına rağmen).

Başka bir deyişle, eğer CSS berbat ve büyükse ve çok yazılmışsa, sayfalarınızın nasıl yükleneceğini hala olumsuz şekilde etkiler.

3. Sayfanızın yüklediği CSS ve sayfanızın yüklendiği javascript arasında bir ilişki var

Javascript’in web sayfalarınızda kullanılan şekli CSSOM’un kurulmasını engelleyebilir (ve çoğu zaman bunu yapar).

Hepsini düz İngilizce olarak anlatmak için … CSSOM her şeyi görüntülemek için gereklidir. İşlem tamamlanıncaya kadar hiçbir şey görüntülenmiyor. Yapılandırılan CSSOM işlemini engellerseniz, CSSOM daha uzun sürer ve bu, herhangi bir şeyin görüntülenmesi daha uzun sürdüğü anlamına gelir. Javascriptiniz CSSOM’un oluşturulmasını engelliyorsa, kullanıcılar daha uzun bir süre boş sayfalara bakıyor.

CSSOM’u etkileyen genel optimizasyonlar

CSSOM’nuzun daha hızlı oluşturulmasına (ve dolayısıyla sayfalarınızın daha hızlı yüklenmesine) yardımcı olacak ana sayfa hızı en iyi uygulamaları burada …

Kısa Özet
Yayın Tarihi
Konunun Adı
CSSOM Nedir? Bilmeniz Gerekenler!
Verilen Puan
51star1star1star1star1star

Leave a Reply

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir