Ποιους τρόπους βελτιστοποίησης της απόδοσης…

Βελτιστοποίηση της απόδοσης (επαναυπολογισμός στυλ και διάταξης) επιτυγχάνεται με τον ελαχιστοποίηση ή την εξάλειψη των λειτουργιών που προκαλούν Layout (reflow ή επαναυπολογισμό θέσεων και διαστάσεων στοιχείων). Τέτοιες λειτουργίες περιλαμβάνουν:

Αλλαγές στις γεωμετρικές ιδιότητες: width, height, left, top, margin, padding.
Αλλαγές περιεχομένου: προσθήκη/αφαίρεση κόμβων, τροποποίηση κειμένου.
Αλλαγές σε ιδιότητες που επηρεάζουν τη ροή του εγγράφου: display, float, position.
Ανάκτηση υπολογισμένων στυλ ή διαστάσεων: element.offsetWidth, getComputedStyle().
Αλλαγή μεγέθους παραθύρου browser.

Τρόποι βελτιστοποίησης:

Αποφύγετε συγχρονισμένους, αναγκαστικούς Layouts: Λάβετε πληροφορίες στυλ/διάταξης πριν κάνετε αλλαγές που μπορούν να προκαλέσουν Layout, και εκτελέστε όλες τις αλλαγές σε πακέτο.
Χρησιμοποιήστε transform και opacity: Αυτές οι ιδιότητες αλλάζουν το στοιχείο χωρίς να επηρεάζουν τη γεωμετρία άλλων στοιχείων, προκαλώντας μόνο Συνθέσεις (Composite) και Ζωγραφική (Paint), αλλά όχι Layout.
Εφαρμόστε will-change: Το χαρακτηριστικό ενημερώνει το πρόγραμμα περιήγησης για τις αναμενόμενες αλλαγές σε ένα στοιχείο, επιτρέποντας την προ-βελτιστοποίηση της απόδοσης (π.χ., μεταφορά του στοιχείου σε ξεχωριστό επίπεδο GPU). Χρησιμοποιήστε το με μέτρο, καθώς μπορεί να αυξήσει την κατανάλωση μνήμης.
Εικονικοποίηση λιστών: Αποκλειστικά τα ορατά στοιχεία να αποδίδονται, μειώνοντας σημαντικά τον αριθμό των στοιχείων στο DOM.
Απομάκρυνση στοιχείου από τη ροή: Για πολύπλοκες κινούμενες εικόνες που απαιτούν συχνές αλλαγές στις γεωμετρικές ιδιότητες, μπορείτε προσωρινά να αφαιρέσετε το στοιχείο από τη φυσιολογική ροή του εγγράφου (π.χ., με position: absolute ή fixed), να εκτελέσετε την κίνηση και να το επαναφέρετε.
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); /* Προκαλεί Συνθέσεις */
  /* Αντί για left: 100px; που προκαλεί Layout και Paint */
}

/* Εφαρμογή του will-change */
.will-animate {
  will-change: transform, opacity; 
}

Ποιους τρόπους βελτιστοποίησης της απόδοσης (αναδιάταξη) γνωρίζετε;