რა მეთოდებს იცნობ რენდერის (გადახედვის) ოპტიმიზაციისთვის?

ოპტიმიზაცია რენდერინგის (სტილებისა და განლაგების გამოთვლის) მინიმუმამდე დაყვანა ან ამ ოპერაციების აღმოფხვრა, რომლებიც იწვევს 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-ის გამოყენება: შეზღუდეთ მოვლენების დამუშავების სიხშირე (მაგალითად, სქროლინგი ან ფანჯრის ზომის ცვლილება), რომლებიც შეიძლება გამოიწვიოს 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; 
}