Przeglądarka i wydajność · Middle · Pytanie 1 z 75
Jaki problem powoduje ten kod?
for (const card of cards) {
const h = card.offsetHeight;
card.style.height = h + 10 + "px";
}- 1Żaden, przeglądarki automatycznie grupują wszystkie odczyty i zapisy
- ✓Poprawna odpowiedź: Layout thrashing: każdy odczyt po zapisie wymusza synchroniczny layout wewnątrz pętli
- 3Wyciek pamięci, bo
offsetHeightcache'uje każdy element
Wyjaśnienie
Odczyt geometrii po zmianie stylów zmusza przeglądarkę do natychmiastowego przeliczenia layoutu. Najpierw zrób wszystkie odczyty, potem wszystkie zapisy.