Renderləmə (yenidən düzəltmə) optimallaşdırma üsullarını bilirsinizmi?

Renderləmənin optimallaşdırılması (stil və düzənləmənin yenidən hesablanması) Layout-u (reflow və ya elementlərin mövqeyi və ölçülərinin yenidən hesablanması) çağıran əməliyyatların minimallaşdırılması və ya aradan qaldırılması ilə əldə edilir. Bu əməliyyatlara daxildir:

• Coğrafi xüsusiyyətlərin dəyişdirilməsi: width, height, left, top, margin, padding.
• Məzmunun dəyişdirilməsi: düyümlərin əlavə olunması/çıxarılması, mətnin dəyişdirilməsi.
• Sənəd axınına təsir edən xüsusiyyətlərin dəyişdirilməsi: display, float, position.
• Hesablanmış stilləri və ya ölçüləri almaq: element.offsetWidth, getComputedStyle().
• Brauzer pəncərəsinin ölçüsünün dəyişdirilməsi.

Optimizasiya üsulları:

1. Senkron, məcburi Layout-lardan qaçın: Layout-u təhrik edə biləcək dəyişikliklərdən əvvəl stil/layout məlumatlarını əldə edin və bütün dəyişiklikləri paket halında həyata keçirin.
2. transform və opacity istifadə edin: Bu xüsusiyyətlər elementi dəyişdirir, lakin digər elementlərin geometriyasına təsir etmir və yalnız Kompozisiya (Composite) və Boyama (Paint) mərhələlərini çağırır, Layout-ı yox.
3. will-change tətbiq edin: Bu atribut brauzərə elementdə gözlənilən dəyişiklikləri bildirir və renderləməni əvvəlcədən optimallaşdırmağa imkan verir (məsələn, elementi GPU-nun ayrı qatına köçürmək). Mütləq istifadə edilməməlidir, çünki yaddaş istifadəsini artıra bilər.
4. Siyahıların virtualizasiyası: Yalnız görünən elementləri render edin, bu da DOM-da elementlərin sayını əhəmiyyətli dərəcədə azaldır.
5. Elementi axımdan çıxarın: Çətin animasiyalar üçün, tez-tez geometrik xüsusiyyətlərdə dəyişiklik tələb edən elementi müvəqqəti olaraq sənədin normal axımından çıxara bilərsiniz (məsələn, position: absolute və ya fixed ilə), animasiyanı həyata keçirin və sonra geri qaytarın.
6. Hadisələrin debounce və throttling: Scroll və ya pəncərə ölçüsünün dəyişdirilməsi kimi hadisələrin çağırış tezliyini məhdudlaşdırın, bu da Layout-u çağırmağı önləyir.

// Sinxron, məcburi Layout nümunəsi
const element = document.getElementById('myElement');
const height = element.offsetHeight; // Layout çağırır
element.style.height = (height + 10) + 'px'; // Yenidən Layout çağırır

// Optimallaşdırılmış nümunə (paket dəyişiklikləri)
const element = document.getElementById('myElement');
// Dəyişikliklərdən əvvəl dəyəri əldə edin
const height = element.offsetHeight; 
// Bütün dəyişiklikləri bir dəfə həyata keçirin
element.style.height = (height + 10) + 'px'; 
element.style.width = (element.offsetWidth + 10) + 'px';

/* Animasiya üçün left/top yerinə transform istifadə edin */
.animated-element {
  transform: translateX(100px); /* Kompozisiya çağırır */
  /* left: 100px; əvəzinə, bu Layout və Paint-ə səbəb olur */
}

/* will-change tətbiqi */
.will-animate {
  will-change: transform, opacity; 
}