Web Programlama Eğitimi: CSS Containment ile Render Maliyetini Düşürmek

Web programlama eğitimi için önce render darboğazını kanıtlayın

CSS kuralı eklemeden önce Chrome DevTools Performance panelinde gerçek kullanıcı akışını kaydedin: sayfayı yenileyin, listeyi 3-4 ekran kaydırın, filtreyi değiştirin ve kaydı durdurun. Main track üzerinde uzun mor 'Recalculate Style', 'Layout' ve yeşil 'Paint' bloklarını açın. Bir kart içindeki state değişikliği, sayfanın çok daha büyük bir bölümünde Layout tetikliyorsa, sorun çoğu zaman DOM ağacının invalidation sınırının olmamasıdır. DevTools Rendering panelinden 'Paint flashing' seçeneğini açarak, örneğin bir rozet metni değiştiğinde tüm kartların veya listenin yeniden boyanıp boyanmadığını doğrudan görün.

Karşılaştırmayı tekrarlanabilir yapmak için Playwright ile aynı kullanıcı yolunu çalıştırın ve uygulama koduna User Timing işaretleri koyun. Bu işaretler sadece laboratuvar metriği değil, filtre uygulama gibi ürün davranışının süresini verir. Önce mevcut dalda 20 tekrarın p50 ve p95 değerini kaydedin, ardından containment değişikliğini ayrı bir commit olarak uygulayıp aynı CPU throttling ayarıyla tekrar ölçün.

performance.mark('filter-start');
setVisibleProducts(applyFilters(products, filters));
requestAnimationFrame(() => {
  performance.mark('filter-painted');
  performance.measure('filter-to-next-frame', 'filter-start', 'filter-painted');
});

Bu yaklaşım javascript eğitimi kapsamında sık görülen yanlış bir çıkarımı da düzeltir: düşük JavaScript çalışma süresi, düşük etkileşim gecikmesi anlamına gelmez. `applyFilters` 4 ms sürse bile, React veya başka bir renderer sonrasında binlerce kart için style recalculation ve layout oluşabilir. Performance kaydında JavaScript çağrısının hemen sonrasındaki rendering dilimlerini ayrı okuyun; yalnızca function profiler çıktısına bakmak CSS kaynaklı maliyeti görünmez kılar.

Frontend development eğitimi: contain ile invalidation sınırı çizin

Bağımsız çalışan ürün kartı, dashboard widget'ı veya sohbet mesajı gibi bileşen köklerinde `contain` kullanın. `layout` değeri, alt ağacın geometrik değişiminin dışarıdaki layout hesabını etkilemeyeceğini bildirir; `paint` ise taşan çizimin bileşenin paint sınırında kırpılmasını sağlar. `style`, sayaçlar gibi bazı style bağımlılıklarının alt ağaçtan dışarı yayılmasını sınırlar. Bu nedenle kartın içindeki fiyat güncellemesi, uygun bir yapıda tüm katalog için yeniden layout hesaplatmak yerine kartın containment sınırında kalabilir.

.product-card {
  contain: layout paint style;
  overflow: clip;
}

.product-card__price {
  font-variant-numeric: tabular-nums;
}

`contain: size` veya `contain: strict` değerini ölçmeden eklemeyin. Size containment, elemanın boyutunu çocuklarından türetmesini engeller; açık bir `block-size`, `min-block-size` veya `contain-intrinsic-size` verilmemiş kartlar 0 yüksekliğe düşebilir. Ayrıca `paint` containment taşan tooltip, açılır menü veya box-shadow'u keser. Tooltip'i kartın içinde `position: fixed` ile çözmeye çalışmak da dönüşüm uygulanmış üst atalar nedeniyle beklenmedik containing block davranışı üretir; overlay katmanını uygulamanın portal köküne taşıyın.

Değişiklikten sonra DevTools Performance kaydında iki sayıyı karşılaştırın: filtre etkileşimi sonrasındaki toplam 'Layout' süresi ve Paint flashing ile yanan alan. Örneğin hedef, bir rozet değişiminde 200 kartın boyanması yerine tek kartın boyanmasıdır. Chrome DevTools'ta Elements panelinden kartı seçip Computed görünümünde `contain` değerinin gerçekten uygulandığını doğrulayın; daha yüksek özgüllükte bir legacy selector bu kuralı ezmiş olabilir.

ReactJS eğitimi ve VueJS eğitimi için content-visibility deseni

`content-visibility: auto`, viewport dışındaki ağır alt ağaçların style, layout ve paint işini erteler. Uzun bir sonuç listesinde her satıra uygulamak yerine, maliyeti anlamlı olan kart gövdesine uygulayın ve tahmini yüksekliği `contain-intrinsic-size` ile verin. Tarayıcı görünmeyen içeriği atladığında bu yedek boyut scroll yüksekliğini korur; aksi halde kartlar görünür oldukça scrollbar uzunluğu değişir ve kullanıcı kaydırırken zıplama hisseder.

.search-result {
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}

@supports not (content-visibility: auto) {
  .search-result { min-block-size: 280px; }
}

ReactJS eğitimi sırasında bu tekniği `memo` ile karıştırmamak gerekir. `React.memo`, props eşitse bileşenin JavaScript render fonksiyonunu atlayabilir; `content-visibility` ise DOM mevcutken görünmeyen alt ağacın tarayıcı rendering aşamalarını ertelemeyi hedefler. Liste satırını memoize etmek, açık filtre değişikliğinde tüm satırların yeni `isSelected` prop'u alması halinde işe yaramaz; buna karşılık viewport dışındaki ayrıntılı açıklamalar `content-visibility` ile yine render maliyetinden kaçınabilir.

VueJS eğitimi için aynı ayrım `v-memo` ve CSS arasında geçerlidir. `v-memo` VNode güncellemesini koşula bağlar, `content-visibility` ise DOM güncellense bile ekran dışı rendering maliyetini düşürür. Sanal liste kütüphanesi zaten DOM'da sadece 30 satır tutuyorsa `content-visibility` eklemek genellikle ölçülebilir kazanç vermez. DevTools Performance ile önce DOM node sayısını ve Layout süresini kontrol edin; 10.000 node'luk gerçek liste ile 30 node'luk virtual scroller aynı optimizasyon problemine sahip değildir.

Angular eğitimi, AngularJS eğitimi ve framework sınırları

Angular eğitimi projelerinde containment'i bileşen host'una uygulamak için stil dosyasına açık bir host kuralı koyabilirsiniz. Bu, Angular change detection maliyetini azaltmaz; ancak change detection sonucunda güncellenen DOM'un layout ve paint etkisini bileşen sınırında tutabilir. Angular DevTools Profiler ile önce change detection süresini, Chrome Performance ile sonra rendering süresini ayrı ölçün. İki araçta farklı iyileşme görmeniz normaldir.

:host {
  display: block;
  contain: layout paint style;
}

:host(.virtual-row) {
  content-visibility: auto;
  contain-intrinsic-size: auto 72px;
}

AngularJS eğitimi verilen legacy uygulamalarda `ng-repeat` altındaki yüzlerce satıra containment koymak digest döngüsünü kısaltmaz. AngularJS yine watcher'ları dolaşır; bu yüzden watcher sayısını Batarang benzeri eski araçlara bağımlı kalmadan Chrome Performance ve uygulama içi sayaçlarla izleyin, sonra `track by item.id`, tek seferlik binding `{{::item.name}}` ve pagination uygulayın. CSS containment burada digest sonrası tarayıcı maliyetini azaltabilecek ikinci katmandır, watcher sorununun yerine geçen bir çözüm değildir.

Bir frontend framework karşılaştırması yaparken React, Vue ve Angular'ın render tetikleme modelini CSS rendering aşamasıyla aynı metrikte değerlendirmeyin. React Profiler commit süresini, Vue Devtools component update süresini, Angular DevTools change detection süresini verir; Chrome Performance ise bunların ardından gelen style, layout ve paint'i gösterir. Aynı filtre senaryosunda bu dört ölçümü tabloya koymak, framework commit'i hızlı olup DOM yerleşimi pahalı olan ekranları ayırt eder.

React Native eğitimi bağlamında web CSS varsayımlarını taşımayın

React Native eğitimi içeriğinde `contain` ve `content-visibility` için doğrudan bir eşdeğer varsaymayın: React Native, tarayıcı CSS layout ve paint pipeline'ını değil Yoga tabanlı layout ile platforma özgü native view çizimini kullanır. Uzun listelerde karşılık gelen başlangıç noktası `FlatList` veya `FlashList` ile windowing kurmaktır. `renderItem` referansını sabitleyin, kararlı bir `keyExtractor` verin ve satır yüksekliği sabitse `getItemLayout` kullanın; böylece görünmeyen binlerce native view oluşturulmaz.

<FlatList
  data={products}
  renderItem={renderProduct}
  keyExtractor={(item) => item.id}
  getItemLayout={(_, index) => ({ length: 72, offset: 72 * index, index })}
  initialNumToRender={12}
  windowSize={7}
/>

Web ve native ekipleri ortak bir performans hedefi yazacaksa 'liste kaydırma sırasında 16.7 ms frame bütçesi' gibi ölçülebilir bir bütçe kullanabilir, fakat çözümü paylaşmamalıdır. Web tarafında Chrome DevTools Performance trace ve Paint flashing ile `content-visibility` etkisini doğrulayın. Native tarafta React Native Perf Monitor, Flipper veya platform profiler'ı ile JS thread ve UI thread frame düşüşlerini ayrı inceleyin. Aynı kelime olan 'virtualization', tarayıcıda DOM rendering ertelemesi, native tarafta view pencereleme gibi farklı mekanizmalara işaret eder.

Sık Sorulan Sorular

Web programlama eğitimi içinde CSS contain ne zaman layout hatası üretir?

`contain: size` kullandığınızda bileşenin boyutu çocuklarından hesaplanmaz. Kartın yüksekliği içerikten geliyorsa `size` eklemeyin; gerekiyorsa `min-block-size` veya `contain-intrinsic-size` tanımlayın. DevTools Elements panelinde box model yüksekliğini ve Performance kaydında sonraki sibling'lerin yerleşimini doğrulayın.

ReactJS eğitimi projesinde React.memo mu content-visibility mi kullanmalıyım?

Önce React Profiler ile commit süresini, sonra Chrome Performance ile Layout ve Paint süresini ölçün. Props değişmediğinde pahalı render fonksiyonunu atlamak için `React.memo` kullanın. DOM güncellense bile ekran dışındaki ağır kartların rendering işini ertelemek için `content-visibility: auto` kullanın. İkisi farklı pipeline aşamalarını hedefler.

Angular eğitimi uygulamasında content-visibility change detection maliyetini azaltır mı?

Hayır. Angular, görünmeyen DOM için de bağlı state değiştiğinde change detection çalıştırabilir. Angular DevTools Profiler'da yüksek change detection maliyeti varsa `OnPush`, immutable input referansları ve liste için `trackBy` ile başlayın. `content-visibility` sadece bu güncellemeden sonraki tarayıcı layout ve paint maliyetini azaltabilir.

Frontend framework karşılaştırması yaparken CSS containment sonucu nasıl ölçülür?

Her frameworkte aynı veri seti, aynı viewport ve aynı filtre akışını kullanın. Framework profiler ile component commit veya update süresini, Chrome DevTools Performance ile toplam Layout, Paint ve etkileşimden sonraki next-frame süresini kaydedin. En az 20 tekrarın p50 ve p95 değerlerini containment öncesi ve sonrası ayrı raporlayın.