Hogyan lehet optimalizálni a Reflow (Layout) és Repaint műveleteket, hogy ne hívódjanak egymás után Layout-Paint-Layout-Paint sorrendben?

A Reflow (Layout) és Repaint optimalizálásához és a Layout-Paint-Layout-Paint lánc elkerüléséhez minimalizálni kell azokat a változtatásokat, amelyek ismételt stílus- és újrarajzolási számításokat okoznak.

Fő ajánlások:

• Csoportosítsa a DOM és stílus módosításokat: hajtsa végre az összes módosítást egy ciklusban, hogy a böngésző csak egyszer végezze el a Layout és Paint műveletet.
• Használja a requestAnimationFrame-t animációkhoz és változtatásokhoz, hogy szinkronban legyenek a render ciklussal.
• Kerülje el az olyan tulajdonságok olvasását, amelyek forced reflow-t okoznak (pl. offsetWidth, clientHeight) közvetlenül a stílus módosítása után — ez szinkron Layout-ot eredményez.
• Használjon CSS osztályokat tömeges változtatásokhoz, ahelyett, hogy egyesével módosítaná a stílusokat.
• Használja a will-change-et, hogy jelezze a böngészőnek, mely tulajdonságok fognak változni, ezzel optimalizálva a renderelést.

Rossz gyakorlat példája:

el.style.width = '100px';
console.log(el.offsetWidth); // forced reflow
el.style.height = '200px';

Optimális:

el.style.width = '100px';
el.style.height = '200px';
console.log(el.offsetWidth); // egy reflow