కనిపించే content ఇప్పటికే paint అయిన తర్వాత కదిలినప్పుడు CLS జరుగుతుంది, user చూస్తున్నదాన్ని shift చేస్తుంది. కారణం దాదాపు ఎల్లప్పుడూ reserve చేయని space లేకుండా load అయ్యే content.
కనిపించే content ఇప్పటికే paint అయిన తర్వాత కదిలినప్పుడు CLS జరుగుతుంది, user చూస్తున్నదాన్ని shift చేస్తుంది. కారణం దాదాపు ఎల్లప్పుడూ reserve చేయని space లేకుండా load అయ్యే content.
transform కు బదులుగా layout property లను (top, height) animate చేయడం.width/height (లేదా aspect-ratio) ను set చేయండి:<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 లేదా swap తో పాటు size-adjust/preload.position: absolute) లేదా కింది నుండి తోయండి.transform/opacity తో animate చేయండి — అవి composited మరియు layout ను trigger చేయవు.CLS అనేది అత్యంత fixable Core Web Vital — ఇది సాధారణంగా కొన్ని లేని dimension లు. మీరు render pipeline ను అర్థం చేసుకున్నారో లేదో test చేయడానికి interviewer లు దీన్ని వాడతారు: ముందుగా space ను reserve చేయడం అంటే browser ఎప్పుడూ reflow చేయాల్సిన అవసరం లేదు, అందుకే transform అనేది top ను animate చేయడాన్ని మించిపోతుంది.
జూనియర్ నుండి సీనియర్ వరకు వివరణాత్మక సమాధానాలతో IT ఇంటర్వ్యూ ప్రశ్నల లైబ్రరీ.
విరాళం