Skip to content

Meniul de mobil își construiește conținutul la prima deschidere

Vitalie requested to merge 43_drawer-lazy-images into main

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)

Merge request reports