Oluşturma Engelleme CSS'si

Ilya Grigorik
Ilya Grigorik

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ı yapısında, oluşturma ağacını oluşturmak için kritik oluşturma yolunun hem DOM hem de CSSOM'yi gerektirdiğini gördük. Bu durum, performans açısından önemli bir sonuç doğurur: Hem HTML hem de 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. Normal bir sayfayı CSS'de oluşturmayı engellemeden oluşturmaya çalışırsak ne olur?

  • CSS varsayılan olarak oluşturmayı engelleyen bir kaynak olarak değerlendirilir.
  • Medya türleri ve medya sorguları, bazı CSS kaynaklarını, oluşturma dışı engelleme olarak işaretlememize olanak tanır.
  • Tarayıcı, engelleme veya engellememe davranışından bağımsız olarak tüm CSS kaynaklarını indirir.
CSS ile NYTimes
CSS içeren The New York Times
CSS'siz NYTimes
CSS içermeyen The New York Times (FOUC)

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şları (FOUC) olarak adlandırılır. Tarayıcı, hem DOM hem de CSSOM'ye sahip olana kadar oluşturmayı engeller.

CSS, oluşturmayı engelleyen bir kaynaktır. İlk oluşturma süresini optimize etmek için mümkün olan en kısa sürede 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ü bildirim, sayfa yüklendiğinde değerlendirilen bir dinamik medya sorgusu içeriyor. 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 engelleme" yalnızca, tarayıcının söz konusu kaynaktaki ilk sayfayı oluşturmasının gerekip gerekmediğini ifade eder. Her iki durumda da tarayıcı, engellemeyen kaynaklar için daha düşük bir önceliğe sahip olsa da CSS öğesini indirmeye devam eder.

Geri bildirim