Render optimizasyonu (yeniden düzenleme) için hangi yöntemleri biliyorsunuz?

Render optimizasyonu (stillerin ve düzenlemenin yeniden hesaplanması) minimize edilerek veya kaldırılarak sağlanır; bu, Layout'ı tetikleyen işlemlerin (reflow veya öğelerin konum ve boyutlarının yeniden hesaplanması) azaltılması veya ortadan kaldırılması anlamına gelir. Bu işlemler şunları içerir:

• Geometrik özelliklerde değişiklikler: width, height, left, top, margin, padding.
• İçerik değişiklikleri: düğüm ekleme/çıkarma, metin değiştirme.
• Belge akışını etkileyen özelliklerde değişiklikler: display, float, position.
• Hesaplanmış stilleri veya boyutları alma: element.offsetWidth, getComputedStyle().
• Tarayıcı penceresinin boyutundaki değişiklikler.

Optimizasyon yöntemleri:

1. Senkron zorunlu Layout'lardan kaçının: Layout'ı tetikleyebilecek değişiklikler öncesinde stil/layout bilgisi alınmalı ve tüm değişiklikler toplu yapılmalıdır.
2. transform ve opacity kullanın: Bu özellikler, diğer öğelerin geometrisini etkilemeden öğeyi değiştirir ve sadece Bileşim (Composite) ve Boyama (Paint) işlemlerini tetikler, Layout'ı değil.
3. will-change kullanımı: Bu özellik, tarayıcıya öğede beklenen değişiklikleri bildirir ve önceden render optimizasyonu yapmasına olanak tanır (örneğin, öğeyi ayrı bir GPU katmanına taşıma). Akıllıca kullanılmalı, çünkü bellek kullanımını artırabilir.
4. Sanal listeleme: Sadece görünür öğeleri render ederek DOM'daki öğe sayısını önemli ölçüde azaltır.
5. Öğeyi akıştan kaldırma: Karmaşık animasyonlar için, sık sık geometrik özelliklerde değişiklik gerektiren öğeyi geçici olarak normal belge akışından kaldırmak (örneğin, position: absolute veya fixed ile), animasyonu yapmak ve sonra tekrar eklemek mümkündür.
6. Debouncing ve throttling ile olayları sınırla: Kaydırma veya pencere boyutu değişikliği gibi olayların çağrı sıklığını sınırla, böylece Layout tetiklenmesini önle.

// Senkron zorunlu Layout örneği
const element = document.getElementById('myElement');
const height = element.offsetHeight; // Layout tetikler
element.style.height = (height + 10) + 'px'; // Yeniden Layout tetikler

// Optimize edilmiş örnek (toplu değişiklik)
const element = document.getElementById('myElement');
// Değeri değişiklikler öncesinde al
const height = element.offsetHeight; 
// Tüm değişiklikleri tek seferde yap
element.style.height = (height + 10) + 'px'; 
element.style.width = (element.offsetWidth + 10) + 'px';

/* Animasyonlar için left/top yerine transform kullanın */
.animated-element {
  transform: translateX(100px); /* Bileşimi tetikler */
  /* left: 100px; yerine, bu layout ve paint tetikler */
}

/* `will-change` kullanımı */
.will-animate {
  will-change: transform, opacity; 
}