Yayınlanma tarihi: 31 Mart 2014
CSS varsayılan olarak oluşturmayı engelleyen bir kaynak olarak kabul edilir. Bu nedenle, CSSOM oluşturulana kadar tarayıcı işlenen hiçbir içeriği oluşturmaz. CSS'nizi yalın tuttuğunuzdan, mümkün olduğunca hızlı bir şekilde sunduğunuzdan ve oluşturmayı engellememek için medya türleri ile sorgular kullandığınızdan emin olun.
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'un gerekli olduğunu görmüştük. Bu durum, önemli bir performans etkisine yol açar: Hem HTML hem de CSS, oluşturmayı engelleyen kaynaklardır. DOM olmadan oluşturulacak bir şey olmayacağından HTML'nin gerekliliği açıktır ancak CSS'nin gerekliliği daha az açık olabilir. CSS'de oluşturmayı engellemeden normal bir sayfayı oluşturmaya çalışırsak ne olur?
Özet
- CSS, varsayılan olarak oluşturmayı engelleyen bir kaynak olarak kabul edilir.
- Medya türleri ve medya sorguları, bazı CSS kaynaklarını oluşturmayı engelleyici olmayan kaynaklar olarak işaretlememize olanak tanır.
- Tarayıcı, engelleme veya engellememe davranışına bakılmaksızın tüm CSS kaynaklarını indirir.
New York Times web sitesinin CSS ile ve CSS olmadan gösterildiği önceki örnek, CSS kullanılabilir olana kadar oluşturmanın neden engellendiğini gösteriyor. CSS olmadan sayfa nispeten kullanılamaz durumda. Sağdaki deneyim genellikle biçimlendirilmemiş içerik flaşı (FOUC) olarak adlandırılır. Tarayıcı, hem DOM hem de CSSOM'a 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 olduğunca hızlı bir şekilde istemciye gönderin.
Ancak yalnızca belirli koşullar altında kullanılan bazı CSS stillerimiz varsa (ör. sayfa yazdırılırken veya büyük bir monitöre yansıtılırken) ne olur? Bu kaynaklarda oluşturmayı engellemek zorunda kalmasak 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ü ile belirli medya özelliklerinin koşullarını kontrol eden sıfır veya daha fazla ifadeden oluşur. Örneğin, ilk stil sayfası bildirimimizde bir medya türü veya sorgusu sağlanmadığı için bu bildirim her durumda geçerlidir. Yani, her zaman oluşturmayı engeller. Diğer yandan, ikinci stil sayfası bildirimi yalnızca içerik yazdırılırken geçerlidir. Belki de düzeni yeniden düzenlemek, yazı tiplerini değiştirmek ve yazdırma için diğer önemli tasarım hususlarını göz önünde bulundurmak istersiniz. Bu nedenle, bu stil sayfası bildirimi ilk yüklendiğinde sayfanın oluşturulmasını engellemez. Son olarak, son stil sayfası bildirimi 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 sunumumuzun, görüntüleme ve yazdırma gibi belirli kullanım alanlarına ve ekran yönündeki değişiklikler, yeniden boyutlandırma etkinlikleri gibi dinamik koşullara göre uyarlanmasını sağlayabiliriz. Stil sayfası öğelerinizi bildirirken medya türüne ve sorgulara çok 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şturmayı engelleyen bir bildirimdir ve tüm koşullarda eşleşir.
- İkinci bildirim de oluşturmayı engeller:
"all"varsayılan türdür. Bu nedenle, bir tür belirtmezseniz tür örtülü olarak"all"olarak ayarlanır. Bu nedenle, birinci ve ikinci bildirimler aslında eşdeğerdir. - Üçüncü bildirimde, sayfa yüklendiğinde değerlendirilen dinamik bir medya sorgusu vardır. 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") uygulandığından sayfa ilk kez tarayıcıya yüklendiğinde oluşturmayı engellemez.
Son olarak, "oluşturmayı engelleme"nin yalnızca tarayıcının, sayfayı bu kaynakta ilk oluşturmayı bekletmesi gerekip gerekmediğini ifade ettiğini unutmayın. Her iki durumda da tarayıcı, engellemeyen kaynaklar için daha düşük bir öncelikle olsa da CSS öğesini indirir.