Ի՞նչ մեթոդներ գիտես ռենդերիցիայի (վերագտնման) օպտիմալացման համար։

Օպտիմալիզացիան ռենդերի (ստիլների և դասավորության հաշվարկների) հասնում է այդ գործողությունների նվազեցմամբ կամ վերացմամբ, որոնք առաջացնում են Layout (կարգավորումը կամ դիրքի և չափերի հաշվարկը)։ Դրանց մեջ են՝

• Գեոմետրիական հատկությունների փոփոխություն՝ width, height, left, top, margin, padding։
• Մատնագրի փոփոխություն՝ տարրերի ավելացում/հեռացում, տեքստի փոփոխություն։
• Տրամադրող հատկությունների փոփոխություն՝ display, float, position։
• Հաշվված ստիլների կամ չափերի ստացում՝ element.offsetWidth, getComputedStyle()։
• Բրաուզերի պատուհանի չափի փոփոխություն։

Օպտիմալիզացիայի եղանակներ՝

1. Ավելի լավ է խուսափել սինխրոնային Layout-ներից։ Ստանալ ստիլների/դասավորության տեղեկությունները՝ նախքան փոփոխություններն անել, որոնք կարող են առաջացնել Layout, և ապա կատարել բոլոր փոփոխությունները խմբաքանակով։
2. Օգտագործել transform և opacity։ Այս հատկությունները փոխում են տարրն առանց մյուս տարրերի գեոմետրիային ազդեցության, առաջացնելով միայն կոմպոզիցիա (Composite) և նկարազարդում (Paint), բայց ոչ Layout։
3. Օգտագործել will-change։ Ատրիբուտը տեղեկացնում է բրաուզերին այն մասին, որ տարրը հնարավոր է փոխվի, ինչը թույլ է տալիս նախապես օպտիմալացնել ռենդերը (օրինակ՝ տեղափոխել տարրին առանձին GPU շերտի վրա)։ Պետք է օգտագործել խելամտորեն, քանի որ դա կարող է մեծացնել հիշողության սպառումը։
4. Վիրտուալիզացիա ցուցակների։ Ռենդերել միայն այն տարրերը, որոնք տեսանելի են այս պահին, ինչը զգալիորեն կրճատում է DOM-ի տարրերի քանակը։
5. Տեղական տարրից հեռացում։ Կոպիտ անիմացիաների համար, որոնք պահանջում են հաճախակի փոփոխություններ՝ կարող եք ժամանակավորապես հեռացնել տարրն նորմալ հոսքից (օրինակ՝ position: absolute կամ fixed), կատարել անիմացիան, և հետո վերադարձնել։
6. Debouncing և throttling։ Սահմանափակել իրադարձությունների handler-ների կանչերի հաճախականությունը (օրինակ՝ սքրոլինգ կամ պատուհանի չափի փոփոխություն), որոնք կարող են առաջացնել Layout։

// Օրինակ սինխրոնային Layout-ի
const element = document.getElementById('myElement');
const height = element.offsetHeight; // առաջացնում է Layout
element.style.height = (height + 10) + 'px'; // կրկին առաջացնում է Layout

// Օպտիմալացված օրինակ (խմբագրված փոփոխություններ)
const element = document.getElementById('myElement');
// Ստանալ արժեքը փոփոխություններից առաջ
const height = element.offsetHeight; 
// Բոլոր փոփոխությունները կատարել մեկանգամյա
element.style.height = (height + 10) + 'px'; 
element.style.width = (element.offsetWidth + 10) + 'px';

/* Օգտագործել transform փոխարեն left/top անիմացիայի համար */
.animated-element {
  transform: translateX(100px); /* առաջացնում է Composite */
  /* Փոխարեն `left: 100px;` որը առաջացնում է Layout և Paint */
}

/* Օգտագործել `will-change` */
.will-animate {
  will-change: transform, opacity; 
}