Yeni Başlayanlar İçin CSS Nesne Modeli (CSSOM)
Arasında çok şey olur ilk HTTP isteği ve Nihai teslimat bir web sayfasının Veri iletimi ve tarayıcının görüntü oluşturma hattı çok farklı teknolojiler gerektirir, bunlardan biri CSS Nesne Modeli, ya da CSSOM.
CSS Nesne Modeli, CSS kodunu alır ve her seçiciyi işler bir ağaç yapısına daha kolay ayrıştırma için. Belki de geliştiricilerin bu kavramı tam olarak anlamaları çok önemli değildir, ancak hakkında daha fazla bilgi edinmek istiyorsanız ders çalışmak değerli bir konudur. tarayıcılar çalışan bir web sitesine nasıl kod koyar?.
Bu yazıda, CSS Nesne Modelinin temellerini ele alacağım ve size nasıl çalıştığını göstereceğim.
CSSOM Nedir??
CSS Nesne Modeli terimi bir Tüm seçicilerin ve her seçicinin ilgili özelliklerinin haritası. Bu stiller kök öğeler olabilir veya yuvalanmış çocukları olabilir..
CSSOM çok benzer HTML’de DOM, Belge Nesne Modeli anlamına gelir. İkisi de bir parçası kritik oluşturma yolu Bu, olması gereken bir dizi adımdır. düzgün bir web sitesi oluşturmak. Bütün bu işlemler gerçekleşir otomatik olarak, kamera ARKASI.
Peki neden CSSOM önemlidir? Tarayıcı tarafından kullanılan harita CSS stillerini doğru şekilde oluşturma bir web sayfasında. Bir bilgisayara bir paragraftaki bütün paragrafların olduğunu söylemenin kolay bir yolu yoktur. .ana içerik div ekstra hat yüksekliğine sahip olmalı.
Çözüm, CSS Nesne Modeli'dir. tüm unsurları ve özellikleri saptar CSS kodunuzdan.
CSSOM, tarayıcının yapmasını kolaylaştırır Sayfadaki stilleri oluşturma. Her şey çok teknik ama süreç hakkında biraz bilgi edinmeye değer, özellikle de web siteleri kurarsanız.
Nasıl çalışır
DOM ve CSSOM’un her ikisi de tüm web tarayıcıları tarafından yaygın olarak kullanılır web sayfalarını yorumlamak ve işlemek. Aşağıdaki şekil Google Geliştiriciler Web Temelleri kılavuzundan alınmıştır ve DOM bir web tarayıcısında oluşturulur.
DOM ve CSSOM’un her ikisinde de tüm bilgiler bayttan dijital haritalara dönüştürülmüş Bir web belgesindeki her elemanı oluşturan İşlem şu şekilde çalışır:
- Tarayıcı HTML'yi indirir bir web sayfası için.
- HTML'yi işlerken, ayrıştırıcı bir bağlantı öğesine çarpabilir harici bir stil sayfasına atıfta bulunma.
- Bu CSS stil sayfası o zaman bir haritaya ayrıştırıldı CSS Nesne Modeli özelliklerini kullanma.
- Çıkan kod daha sonra olabilir DOM içindeki öğelere uygulanır.
Bunların hepsi çok hızlı gerçekleşir ve gerçekleşir. her sayfa isteğinde. Aşağıdaki diğer diyagram şemaları göstermektedir. CSSOM'un örnek ağaç yapısı.
Diyagramdaki bazı özelliklerin daha açık gri yazı tipi renklerine sahip olduğuna dikkat edin. Bu özellikler ebeveynden miras. Gövde belirli bir yazı tipi boyutuna sahip olduğundan, gövde içindeki tüm öğeler geçersiz kılmadıkça bu yazı tipi boyutunu da alır..
HTML ve CSS dizeleri belirteçlere dönüştürülmüş o zaman olabilir düğüm olarak anlaşıldı Tarayıcı tarafından Bu düğümler ağaç yapısındaki nesneler Bu, sayfanın tamamının nasıl oluşturulması gerektiğini tanımlar..
CSSOM ve DOM tamamen ayrı veri modelleri, bu yüzden onlar birbirinden ayrı ayrı ayrıştırılır. Ama ikisi de var benzer ağaç yapıları, ve her ikisi de aynı amaca hizmet eder: tarayıcıya sayfadaki farklı öğeleri işlemek ve tanımlamak için bir yapı vermek.
Web Geliştiricileri Neden Dikkat Edilmeli?
Tüm oluşturma işleminden beri arka uçta olur, Gerçekten CSSOM ağacı hakkında endişelenmene gerek yok. Fakat nasıl çalıştığını anlamak faydalı olabilir..
Hatırlanması gereken bir şey CSSOM tamamen yüklenmeli web sayfasının gösterilmesinden önce, sayfadaki her elemanın nasıl görünmesi gerektiğini tanımlayacağı gibi. Sayfa, CSSOM'dan önce yüklüyse, önce düz HTML, ardından birkaç saniye sonra stiller.
Tarayıcılar özellikle bundan kaçınır çünkü son kullanıcılar için kafa karıştırıcıdır. Ve bu CSSOM dikkat çekici önbelleğe alınamaz; olmalı her sayfada yeniden oluşturuldu.
Varlıkları daha hızlı yüklemek ancak tarayıcıda bir sayfa oluşturmak için gerçek CSS dosyaları önbelleğe alınabilir her zaman CSSOM ayrıştırıcısının çalıştırılmasını gerektirir. Bu ayrıca, JavaScript'in görüntü oluşturma ve performans üzerinde olumsuz bir etkisi olabileceği anlamına gelir.
Harici CSS / JS kaynakları ve yükleme süreleri hakkında daha fazla bilgi edinmek için bu makaleyi okumanı şiddetle tavsiye ederim.
Sitenizi optimize etmenin en iyi yolu bir doğal çağlayan hangi kaynaklardan tandem yüklü.
Teknik olarak bir JS API olduğundan CSSOM'u JavaScript kullanarak değiştirmek mümkündür. Ancak, JavaScript DOM manipülasyonuyla karşılaştırıldığında pek bir amaca hizmet etmiyor.
CSSOM'u öğrenmenin en büyük nedeni, web sitelerinin gerçekte nasıl çalıştığı hakkında kendinizi daha fazla eğitmek.
İnternetin sorunsuz çalışmasını sağlamak için almamız gereken birçok şey var. Tüm süreç hakkında biraz daha fazla şey anladığınızda, her şeyin nasıl bir araya geldiğini görselleştirebilir ve umarım World Wide Web'in varlığı için biraz değer kazanabilirsiniz..
Daha fazla okuma
Umarım bu intro size CSS Nesne Modelinin ne olduğu ve web sayfalarını nasıl etkilediği konusunda sağlam bir fikir verebilir. Orada CSSOM'da manipüle edilecek pek bir şey yok, bu yüzden DOM’den biraz farklı.
Ancak, web geliştirmede hala kritik bir teknolojidir ve tarayıcı oluşturmanın ana yönlerini netleştirmelidir..
CSSOM'u ve bunun nasıl çalıştığını tartışan başka birçok kaynak var. Daha fazla bilgi edinmek istiyorsanız, önerdiğim bazı yazılar:
- CSS Nesne Modeli Genel Bakış
- CSSOM’u Keşfetmek: Bir CSS Nesne Analizörü Yapmak
- Her Frontend Geliştiricisinin Web Sayfası Oluşturma Hakkında Bilmeniz Gerekenler
