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'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 üzerinde önemli bir etkiye neden olur: Hem HTML hem de CSS, oluşturma engelleyici 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. Normal bir sayfayı CSS'de oluşturmayı engellemeden 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 ö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 Stilsiz İçerik Flash (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şullarda (örneğin, sayfa yazdırılırken veya büyük bir ekrana yansıtılırken) kullanılan bazı CSS stillerimiz varsa 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ızda bir medya türü veya sorgu sağlanmadığından bu tüm durumlarda geçerlidir; yani her zaman oluşturma engelidir. Diğer yandan, ikinci stil sayfası bildirimi yalnızca içerik yazdırılırken geçerlidir. Baskı için düzeni yeniden düzenlemek, yazı tiplerini değiştirmek ve diğer önemli tasarım unsurlarını kullanmak isteyebilirsiniz. Dolayısıyla, bu stil sayfası beyanının, ilk yüklendiğinde sayfanın oluşturulmasını engellemesine gerek yoktur. 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ı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 çok dikkat edin; 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ı engelleyip 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, sayfanın ilk oluşturulma işleminin söz konusu kaynakta tarayıcı tarafından tutulması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.