Welke methoden voor optimalisatie van rendering (herlay-out) ken je?

Optimalisatie van rendering (herberekening van stijlen en lay-out) wordt bereikt door operaties te minimaliseren of te elimineren die Layout veroorzaken (reflow of herberekening van posities en afmetingen van elementen). Deze operaties omvatten:

• Wijzigingen in geometrische eigenschappen: width, height, left, top, margin, padding.
• Wijzigingen in inhoud: toevoegen/verwijderen van knooppunten, tekstwijzigingen.
• Wijzigingen in eigenschappen die de stroom van het document beïnvloeden: display, float, position.
• Opvragen van berekende stijlen of afmetingen: element.offsetWidth, getComputedStyle().
• Het wijzigen van de grootte van het browservenster.

Manieren van optimalisatie:

1. Vermijd synchrone, gedwongen Layouts: Verkrijg Style/Layout-informatie voordat je wijzigingen aanbrengt die een Layout kunnen veroorzaken, en voer alle wijzigingen in één keer uit.
2. Gebruik transform en opacity: Deze eigenschappen wijzigen het element zonder de geometrie van andere elementen te beïnvloeden, en veroorzaken alleen Compositie (Composite) en Schilderen (Paint), maar geen Layout.
3. Pas will-change toe: Het attribuut informeert de browser over verwachte wijzigingen aan een element, waardoor het renderen vooraf kan worden geoptimaliseerd (bijvoorbeeld door het element naar een aparte GPU-laag te verplaatsen). Gebruik het met mate, omdat het het geheugenverbruik kan verhogen.
4. Virtueel maken van lijsten: Render alleen de zichtbare elementen, wat het aantal elementen in de DOM aanzienlijk vermindert.
5. Verwijder het element uit de stroom: Voor complexe animaties die frequente wijzigingen in geometrische eigenschappen vereisen, kan het element tijdelijk uit de normale stroom van het document worden verwijderd (bijvoorbeeld met position: absolute of fixed), de animatie uitvoeren en vervolgens terugplaatsen.
6. Debouncing en throttling van gebeurtenissen: Beperk de frequentie van het aanroepen van event handlers (zoals scrollen of het wijzigen van de venstergrootte), die Layout kunnen veroorzaken.

// Voorbeeld van synchrone, gedwongen Layout
const element = document.getElementById('myElement');
const height = element.offsetHeight; // Veroorzaakt Layout
element.style.height = (height + 10) + 'px'; // Veroorzaakt opnieuw Layout

// Geoptimaliseerd voorbeeld (batchwijzigingen)
const element = document.getElementById('myElement');
// Verkrijg waarde vóór wijzigingen
const height = element.offsetHeight; 
// Voer alle wijzigingen in één keer uit
element.style.height = (height + 10) + 'px'; 
element.style.width = (element.offsetWidth + 10) + 'px';

/* Gebruik transform in plaats van left/top voor animaties */
.animated-element {
  transform: translateX(100px); /* Veroorzaakt Compositie */
  /* In plaats van left: 100px; dat Layout en Paint veroorzaakt */
}

/* Gebruik van will-change */
.will-animate {
  will-change: transform, opacity; 
}