Yayınlanma tarihi: 31 Mart 2014
Varsayılan olarak CSS, oluşturma işlemini engelleyen bir kaynak olarak değerlendirilir. Bu, tarayıcı CSSOM oluşturulana kadar işlenen hiçbir içeriği oluşturmayacağı anlamına gelir. CSS'nizi sade tutun, mümkün olduğunca hızlı bir şekilde yayınlayın ve oluşturmanın engellemesini kaldırmak için medya türlerini ve sorgularını kullanın.
Oluşturma ağacı oluşturma bölümünde, kritik oluşturma yolunun oluşturma ağacını oluşturmak için hem DOM hem de CSSOM'u gerektirdiğini gördük. Bu durum, performans açısından önemli bir sonuç doğurur: HTML ve CSS, oluşturmayı engelleyen kaynaklardır. DOM olmadan oluşturacak bir şeyimiz olmayacağı için HTML'nin gerekli olduğu açıktır ancak CSS koşulu daha az açık olabilir. CSS'de oluşturmayı engellemeden tipik bir sayfayı oluşturmaya çalışırsak ne olur?
Özet
- CSS varsayılan olarak oluşturmayı engelleyen bir kaynak olarak değerlendirilir.
- Medya türleri ve medya sorguları, bazı CSS kaynaklarını oluşturmayı engellemeyen olarak işaretlememize olanak tanır.
- Tarayıcı, engelleme veya engellememe davranışından bağımsız olarak tüm CSS kaynaklarını indirir.
New York Times web sitesini CSS ile ve CSS olmadan gösteren önceki örnekte, CSS mevcut olana kadar oluşturmanın neden engellendiğini görebilirsiniz. CSS olmadan sayfa nispeten kullanılamaz durumdadır. Sağdaki deneyim genellikle stil uygulanmamış içerik flaşını (FOUC) olarak adlandırılır. Tarayıcı, hem DOM'u hem de CSSOM'u alana kadar oluşturmayı engeller.
CSS, oluşturmayı engelleyen bir kaynaktır. İlk oluşturma süresini optimize etmek için mümkün olduğunca hızlı bir şekilde müşteriye iletin.
Ancak yalnızca belirli koşullar altında kullanılan bazı CSS stilleri varsa (ör. sayfa yazdırıldığında veya büyük bir monitöre yansıtıldığında) ne olur? Bu kaynaklarda oluşturmayı engellememiz gerekmese iyi olurdu.
CSS "medya türleri" ve "medya sorguları", aşağıdaki kullanım alanlarını ele almamıza olanak tanır:
<link href="style.css" rel="stylesheet" />
<link href="print.css" rel="stylesheet" media="print" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />
Medya sorgusu, bir medya türünden ve belirli medya özelliklerinin koşullarını kontrol eden sıfır veya daha fazla ifadeden oluşur. Örneğin, ilk stil sayfası beyanımız bir medya türü veya sorgu sağlamadığından her durumda geçerlidir. Yani her zaman oluşturmayı engeller. Öte yandan, ikinci stil sayfası beyanı yalnızca içerik yazdırıldığında geçerli olur. Yazdırma için düzeni yeniden düzenlemek, yazı tiplerini değiştirmek ve diğer önemli tasarım hususlarını dikkate almak isteyebilirsiniz. Bu nedenle, bu stil sayfası beyanının sayfa ilk yüklendiğinde sayfanın oluşturulmasını engellemesi gerekmez. Son olarak, son stil sayfası beyanı tarayıcı tarafından yürütülen bir "medya sorgusu" sağlar: Koşullar eşleşirse tarayıcı, stil sayfası indirilip işlenene kadar oluşturmayı engeller.
Medya sorgularını kullanarak sunumuza ekran ve baskı gibi belirli kullanım alanlarına ve ekran yönelimindeki değişiklikler, yeniden boyutlandırma etkinlikleri gibi dinamik koşullara göre şekil verebiliriz. Stil sayfası öğelerinizi tanımlarken medya türüne ve sorgulara dikkat edin. Bunlar, kritik oluşturma yolu performansını büyük ölçüde etkiler.
Aşağıdaki örnekleri inceleyin:
<link href="style.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="print.css" rel="stylesheet" media="print" />
- İlk beyan, oluşturmayı engeller ve tüm koşullarda eşleşir.
- İkinci beyan da oluşturmayı engeller:
"all"varsayılan türdür. Bu nedenle, bir tür belirtmezseniz"all"olarak gizlice ayarlanır. Bu nedenle, ilk ve ikinci bildirimler aslında eşdeğerdir. - Üçüncü bildirimde, sayfa yüklendiğinde değerlendirilen dinamik bir medya sorgusu bulunur. Sayfa yüklenirken cihazın yönüne bağlı olarak
portrait.css, oluşturmayı engelleyebilir veya engellemeyebilir. - Son beyan yalnızca sayfa yazdırıldığında (
"print") uygulanır. Bu nedenle, sayfa tarayıcıda ilk kez yüklendiğinde oluşturmayı engellemez.
Son olarak, "oluşturma engellemenin" yalnızca tarayıcının, sayfanın ilk oluşturulmasını bu kaynakta tutmasının gerekip gerekmediğini ifade ettiğini unutmayın. Her iki durumda da tarayıcı, engellemeyen kaynaklar için daha düşük bir önceliğe sahip olsa da CSS öğesini indirmeye devam eder.