Meniul de mobil își construiește conținutul la prima deschidere
Sertarul de meniu nu se demontează niciodată — se stinge și rămâne în DOM ca
tranziția de opacitate să aibă pe ce rula — iar invisible îl lasă întins peste
tot ecranul. Pentru browser, pozele dinăuntru sunt deci pe ecran și le cere
imediat, lazy sau nu: 17,9 KB luați din banda pe care o așteaptă imaginea
principală a paginii, pentru un meniu pe care nimeni nu l-a deschis. Măsurat pe
producție, cele șase poze plecau la 615 ms, iar poza pe care pagina o desenează
abia la 776 ms.
Conținutul sertarului se construiește acum la prima deschidere și rămâne montat
după aceea, deci a doua deschidere nu recere nimic. Starea se pune în timpul
randării, nu dintr-un efect: cu prefers-reduced-motion stingerea e instantanee,
iar un prim cadru gol s-ar vedea.
Verificare rulată
npm run lint, npm run build, npx vitest run în frontend/:
34 de fișiere, 444 de teste, toate trec.
Comparație A/B pe același port, build-ul de pe main și cel de aici, la 375 px:
- înainte: șase
<img src="/nav/shop-*.jpg">în DOM cu meniul închis; - după: zero poze de meniu în DOM și zero cereri
/nav/la încărcarea paginii; cele șase pleacă abia la prima deschidere a meniului; - meniul deschis: 47 de elemente, aceleași coordonate, aceleași dimensiuni, același text, în aceeași ordine — capturile de ecran sunt identice.
Closes #43 (closed)