CLS sker, når synligt indhold flytter sig, efter det allerede var paintet, og forskyder det, brugeren kiggede på. Årsagen er næsten altid indhold, der indlæses uden reserveret plads.
CLS sker, når synligt indhold flytter sig, efter det allerede var paintet, og forskyder det, brugeren kiggede på. Årsagen er næsten altid indhold, der indlæses uden reserveret plads.
top, height) i stedet for transform.width/height (eller aspect-ratio), så plads reserveres før indlæsning:<img src="/photo.jpg" width="1200" height="800" alt="..."> <!-- reserves the box -->
.hero { aspect-ratio: 16 / 9; } /* reserves ratio for responsive media */
font-display: optional eller swap plus size-adjust/preload for at minimere reflow'et, når web-fonten ankommer.position: absolute) eller skub fra bunden.transform/opacity — de er composited og udløser ikke layout.CLS er den mest rettelige Core Web Vital — det er normalt en håndfuld manglende dimensioner. Interviewere bruger den til at teste, om du forstår render-pipelinen: at reservere plads i starten betyder, at browseren aldrig behøver at reflow'e, hvilket er grunden til, at transform slår at animere top.
Et bibliotek af IT-interviewspørgsmål med detaljerede svar — fra Junior til Senior.
Donér