Yayınlanma tarihi: 31 Mart 2014
Varsayılan olarak CSS, oluşturmayı engelleyen bir kaynak olarak kabul edilir. Bu da tarayıcı işlenmiş içeriği oluşturmaz. Bu işlem, CSSOM'nin somut olarak ortaya koyar. CSS'nizin kısa ve etkili olduğundan emin olun, kullanabilir ve oluşturma engelini kaldırmak için medya türleri ile sorguları kullanabilirsiniz.
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: Hem HTML hem de CSS, oluşturmayı engelleyen kaynaklardır. DOM olmadan oluşturabileceğimiz hiçbir şey olmayacağından HTML'nin anlaşılır olması gerekir. Ancak, CSS gereksinimi daha az belirgin 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şturma dışı engelleme olarak işaretlememize olanak tanır.
- Tarayıcı, engelleme veya engelleme 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 örnek, CSS kullanılabilir hale gelene kadar oluşturmanın neden engellendiğini, CSS olmadan sayfanın nispeten kullanılamamasını gösterir. 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şturma işlemini 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ı" bize 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ızda bir medya türü veya sorgu sağlanmadığından bu tüm durumlarda geçerlidir; yani her zaman oluşturma engelidir. Ö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ı bildirimi bir "medya sorgusu" sağlar. ; koşullar eşleşirse tarayıcı, stil sayfası indirilip işlenene kadar sayfanın oluşturulmasını engeller.
Medya sorguları kullanarak sunumumuzu belirli kullanım alanlarına (ör. görüntü veya baskı) ve ayrıca ekran yönünde değişiklikler, yeniden boyutlandırma etkinlikleri ve diğer dinamik koşullara göre uyarlayabiliriz. 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 bildirim, oluşturma engellemedir 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 bildirim yalnızca sayfa yazdırılırken (
"print") uygulanır. Dolayısıyla sayfa tarayıcıda ilk kez yüklenirken oluşturma engellenmez.
Son olarak, "oluşturma engellemenin" yalnızca tarayıcının, sayfanın ilk oluşturulmasını söz konusu 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.