“content-visibility”: oluşturma performansınızı artıran yeni CSS özelliği

bu content-visibility özelliği, sayfa yükleme performansını iyileştirmek için en etkili yeni CSS özelliklerinden biri olabilir. content-visibility kullanıcı aracısının, düzen ve boyama da dahil olmak üzere bir öğenin oluşturma işini ihtiyaç duyulana kadar atlamasını sağlar. Oluşturma atlandığından, içeriğinizin büyük bir bölümü ekran dışındaysa, content-visibility özelliği, ilk kullanıcının çok daha hızlı yüklenmesini sağlar. Ayrıca, ekrandaki içerikle daha hızlı etkileşime olanak tanır. Oldukça temiz.

tarayıcı desteği #

content-visibility içindeki ilkellere dayanır CSS Kapsama Spesifikasyonu. Sırasında content-visibility şimdilik yalnızca Chromium 85’te desteklenmektedir (ve “prototiplemeye değer” Firefox için), Kapsama Spesifikasyonu şurada desteklenir: en modern tarayıcılar.

CSS Muhafazası #

CSS kapsamının temel ve kapsayıcı hedefi, sağlayarak web içeriğinin performans iyileştirmelerini sağlamaktır. bir DOM alt ağacının öngörülebilir izolasyonu sayfanın geri kalanından.

Temel olarak bir geliştirici, bir tarayıcıya sayfanın hangi bölümlerinin bir içerik kümesi olarak kapsüllendiğini söyleyebilir ve tarayıcıların alt ağacın dışındaki durumu dikkate almasına gerek kalmadan içerik hakkında akıl yürütmesine olanak tanır. Hangi içerik bitlerinin (alt ağaçların) yalıtılmış içerik içerdiğini bilmek, tarayıcının sayfa işleme için optimizasyon kararları verebileceği anlamına gelir.

Her biri için potansiyel bir değer olan dört tür CSS içeriği vardır. contain Boşlukla ayrılmış bir değerler listesinde birleştirilebilen CSS özelliği:

• size: Bir öğedeki boyut sınırlaması, öğenin kutusunun alt öğelerini incelemeye gerek kalmadan düzenlenebilmesini sağlar. Bu, tek ihtiyacımız olan öğenin boyutuysa, alt öğelerin düzenini potansiyel olarak atlayabileceğimiz anlamına gelir.
• layout: Düzen kapsamı, alt öğelerin sayfadaki diğer kutuların dış düzenini etkilemediği anlamına gelir. Bu, tek yapmak istediğimiz diğer kutuları yerleştirmekse, potansiyel olarak alt öğelerin düzenini atlamamıza izin verir.
• style: Stil sınırlaması, alt öğelerinden daha fazlasını etkileyebilecek özelliklerin öğeden (örneğin sayaçlar) kaçmamasını sağlar. Bu, tek istediğimiz diğer öğelerdeki stilleri hesaplamaksa, potansiyel olarak torunlar için stil hesaplamasını atlamamıza izin verir.
• paint: Boya kapsamı, içeren kutunun alt öğelerinin sınırları dışında görüntülenmemesini sağlar. Hiçbir şey öğeyi görünür şekilde taşamaz ve bir öğe ekran dışındaysa veya başka bir şekilde görünmüyorsa, onun alt öğeleri de görünmez. Bu, öğe ekran dışındaysa torunları boyamayı potansiyel olarak atlamamıza izin verir.

ile işleme işini atlamak content-visibility #

Tarayıcı optimizasyonları yalnızca uygun bir küme belirtildiğinde devreye girebileceğinden, hangi kapsama değerlerinin kullanılacağını anlamak zor olabilir. En iyi neyin işe yaradığını görmek için değerlerle oynayabilir veya adı verilen başka bir CSS özelliğini kullanabilirsiniz. content-visibility gerekli sınırlamayı otomatik olarak uygulamak için. content-visibility bir geliştirici olarak minimum çabayla tarayıcının sağlayabileceği en büyük performans kazanımlarını elde etmenizi sağlar.

content-visibility özelliği birkaç değer kabul eder, ancak auto anında performans iyileştirmeleri sağlayandır. olan bir eleman content-visibility: auto kazançlar layout, style Ve paint çevreleme. Öğe ekran dışındaysa (ve başka bir şekilde kullanıcıyla ilgili değilse – ilgili öğeler, alt ağacında odak veya seçime sahip olanlar olacaktır), ayrıca kazanır size çevreleme (ve durur tablo Ve isabet testi onun içerikleri).

Bu ne anlama gelir? Kısacası, öğe ekran dışındaysa, alt öğeleri oluşturulmaz. Tarayıcı, içeriğini dikkate almadan öğenin boyutunu belirler ve orada durur. Öğenin alt ağacının stili ve düzeni gibi oluşturma işlemlerinin çoğu atlanır.

Öğe görünüme yaklaştıkça, tarayıcı artık öğeyi eklemez. size çevreleme ve öğenin içeriğini boyamaya ve isabet testine başlar. Bu, oluşturma işinin kullanıcı tarafından görülebilmesi için tam zamanında yapılmasını sağlar.

Erişilebilirlik hakkında bir not #

özelliklerinden biri content-visibility: auto ekran dışı içeriğin, belge nesne modelinde ve dolayısıyla erişilebilirlik ağacında kullanılabilir durumda kalmasıdır (aksine visibility: hidden). Bu, içeriğin yüklenmesini beklemeden veya oluşturma performansından ödün vermeden sayfada aranabileceği ve sayfaya gidilebileceği anlamına gelir.

Ancak bunun ters tarafı şu ki, dönüm noktası gibi stil özelliklerine sahip öğeler display: none veya visibility: hidden tarayıcı bu stilleri görünüme girene kadar işlemeyeceğinden, ekran dışındayken erişilebilirlik ağacında da görünür. Bunların erişilebilirlik ağacında görünür olmasını ve potansiyel olarak karışıklığa neden olmasını önlemek için, şunları da eklediğinizden emin olun: aria-hidden="true".

Örnek: bir seyahat blogu #

Bir seyahat blogu tipik olarak birkaç resim ve biraz açıklayıcı metin içeren bir dizi hikaye içerir. Tipik bir tarayıcı bir seyahat bloguna gittiğinde şunlar olur:

1. Sayfanın bir kısmı, gerekli kaynaklarla birlikte ağdan indirilir.
2. Tarayıcı, içeriğin kullanıcı tarafından görülüp görülmediğini dikkate almadan sayfanın tüm içeriğini şekillendirir ve düzenler.
3. Tüm sayfa ve kaynaklar indirilene kadar tarayıcı 1. adıma geri döner.

2. adımda, tarayıcı değişmiş olabilecek şeyleri aramak için tüm içeriği işler. Yeni güncellemeler sonucunda değişmiş olabilecek öğelerle birlikte, yeni öğelerin stilini ve düzenini günceller. Bu render çalışması. Bu zaman alır.

Şimdi koyarsanız ne olacağını düşünün content-visibility: auto blogdaki her bir hikayede. Genel döngü aynıdır: tarayıcı sayfanın parçalarını indirir ve işler. Ancak fark, 2. adımda yaptığı iş miktarındadır.

İçerik görünürlüğü ile, o anda kullanıcı tarafından görülebilen (ekranda bulunan) tüm içerikleri biçimlendirecek ve düzenleyecektir. Bununla birlikte, tamamen ekran dışında olan hikayeyi işlerken, tarayıcı oluşturma işini atlayacak ve yalnızca öğe kutusunun kendisinin stilini ve düzenini oluşturacaktır.

Bu sayfayı yükleme performansı, sanki ekrandaki hikayelerin tamamı ve ekran dışındaki hikayelerin her biri için boş kutular içeriyormuş gibi olacaktır. Bu, çok daha iyi performans gösterir. %50 veya daha fazla beklenen azalma yükleme oluşturma maliyetinden. Örneğimizde, bir 232ms zamanı işlemek 30ms render süresi. O bir 7x performans artışı.

Bu avantajlardan yararlanmak için yapmanız gereken iş nedir? İlk olarak, içeriği bölümlere ayırıyoruz:

Ardından, bölümlere aşağıdaki stil kuralını uygularız:

.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* Explained in the next section. */
}

ile bir elemanın doğal boyutunu belirtme contain-intrinsic-size #

Olası faydaların farkına varmak için content-visibility, içeriğin oluşturma sonuçlarının öğenin boyutunu hiçbir şekilde etkilememesini sağlamak için tarayıcının boyut sınırlaması uygulaması gerekir. Bu, öğenin boşmuş gibi yerleştirileceği anlamına gelir. Elemanın normal bir blok düzeninde belirtilen bir yüksekliği yoksa, o zaman 0 yükseklikte olacaktır.

Kaydırma çubuğunun boyutu değişeceğinden, her katın sıfır olmayan bir yüksekliğe sahip olmasına bağlı olarak bu ideal olmayabilir.

Neyse ki, CSS başka bir özellik sağlar, contain-intrinsic-sizeöğenin doğal boyutunu etkili bir şekilde belirten eleman boyut sınırlamasından etkileniyorsa. Örneğimizde, bunu şu şekilde ayarlıyoruz: 1000px bölümlerin yüksekliği ve genişliği için bir tahmin olarak.

Bu, boyutlandırılmamış div’lerinizin hala yer kaplamasını sağlayarak, “gerçek boyutlu” boyutlarda tek bir çocuğu varmış gibi düzenleneceği anlamına gelir. contain-intrinsic-size işlenen içerik yerine yer tutucu boyutu görevi görür.

Chromium 98 ve sonrasında yeni bir auto için anahtar kelime contain-intrinsic-size. Belirtildiğinde tarayıcı, varsa son oluşturulan boyutu hatırlar ve geliştirici tarafından sağlanan yer tutucu boyutu yerine bunu kullanır. Örneğin, contain-intrinsic-size: auto 300pxöğe bir ile başlayacak 300px her boyutta içsel boyutlandırma, ancak öğenin içeriği işlendikten sonra, işlenen gerçek boyutu koruyacaktır. Sonraki işleme boyutu değişiklikleri de hatırlanacaktır. Uygulamada bunun anlamı, bir öğeyi kaydırırsanız content-visibility: auto uygulandığında ve ardından ekran dışına kaydırıldığında, ideal genişlik ve yüksekliğini otomatik olarak koruyacak ve yer tutucu boyutlandırmaya geri dönmeyecek. Bu özellik, kullanıcı sayfayı keşfettikçe boyutlandırma tahminini zaman içinde otomatik olarak iyileştirebilen sonsuz kaydırıcılar için özellikle kullanışlıdır.