Milliseid renderimise (taasarvutamise) optimeerimise viise tead?

Optimeerimine renderdamisel (stiiulide ja paigutuse arvutamine) saavutatakse nende operatsioonide minimeerimise või eemaldamisega, mis põhjustavad Layouti (paigutuse või positsiooni ja suuruse arvutamise). Sellised operatsioonid hõlmavad:

• Geomeetriliste omaduste muutmist: width, height, left, top, margin, padding.
• Sisu muutmist: elementide lisamine/eemaldamine, teksti muutmine.
• Omaduste muutmist, mis mõjutavad dokumendi voogu: display, float, position.
• Arvutatud stiilide või mõõtmete saamist: element.offsetWidth, getComputedStyle().
• Brauseri akna suuruse muutmist.

Optimeerimise viisid:

1. Vältida sünkroonseid sunditud Layout-e: Saada stiilide/paigutuse info enne muudatuste tegemist, mis võivad põhjustada Layouti, ning seejärel teha kõik muudatused partii kaupa.
2. Kasutada transform ja opacity: Need omadused muudavad elementi, mõjutamata teiste elementide geomeetriat, põhjustades ainult Composite (kompositsiooni) ja Paint (joonistamise), kuid mitte Layouti.
3. Kasutada will-change: Atribuut teavitab brauserit oodatavatest muudatustest elemendis, võimaldades eelnevalt renderdamist optimeerida (näiteks, liigutades elementi eraldi GPU kihile). Seda tuleks kasutada mõistlikult, kuna see võib suurendada mälu kasutust.
4. Virtuaalne loendite visualiseerimine: Renderda ainult need loendi elemendid, mis on praegu nähtavad, mis oluliselt vähendab DOM-i elementide arvu.
5. Elemendi eemaldamine voost: Keerukate animatsioonide jaoks, mis nõuavad sagedasi geomeetriliste omaduste muutusi, saab ajutiselt eemaldada elemendi normaalsest voost (näiteks position: absolute või fixed kasutades), teha animatsiooni ning seejärel tagasi panna.
6. Debouncing ja throttling sündmuste puhul: Piirata sündmuste käsitlejate kutsumise sagedust (näiteks kerimine või akna suuruse muutmine), mis võivad põhjustada Layouti.

// Näide sünkroonilisest sunditud Layoutist
const element = document.getElementById('myElement');
const height = element.offsetHeight; // põhjustab Layouti
element.style.height = (height + 10) + 'px'; // põhjustab Layouti uuesti

// Optimeeritud näide (partii muudatused)
const element = document.getElementById('myElement');
// Saame väärtuse enne muudatusi
const height = element.offsetHeight; 
// Teeme kõik muudatused ühe korraga
elet.style.height = (height + 10) + 'px'; 
element.style.width = (element.offsetWidth + 10) + 'px';

/* Kasutada transform asemel left/top animatsiooniks */
.animated-element {
  transform: translateX(100px); /* põhjustab Composite */
  /* Selle asemel, et kasutada `left: 100px;`, mis põhjustab Layout ja Paint */
}

/* Kasutada `will-change` */
.will-animate {
  will-change: transform, opacity; 
}