Reflow (layout) ve repaint nedir? Performans için neden önemlidir?

Tarayıcı bir sayfayı şu adımlarla çizer: Style → Layout (reflow) → Paint → Composite.

• Reflow: elemanların boyut ve konumlarının yeniden hesaplanması. En pahalı adımdır ve çoğu zaman tüm sayfayı etkiler. Tetikleyenler: width, height, top, font-size değişimi, DOM ekleme.
• Repaint: yerleşim değişmeden piksellerin yeniden boyanması: color, background, box-shadow.
• Composite: yalnızca GPU katmanlarının birleştirilmesi: transform, opacity. En ucuz adımdır.

Pratik kurallar:

• Animasyonlarda yalnızca transform ve opacity kullanın
• Okuma ve yazmayı karıştırmayın (layout thrashing):

// Kötü: her turda zorunlu reflow
kutular.forEach(k => { k.style.width = k.offsetWidth + 10 + "px"; });

// İyi: önce hepsini oku, sonra hepsini yaz
const genislikler = kutular.map(k => k.offsetWidth);
kutular.forEach((k, i) => { k.style.width = genislikler[i] + 10 + "px"; });