CLS, காணக்கூடிய content ஏற்கனவே paint செய்யப்பட்ட பிறகு நகரும்போது ஏற்படுகிறது, பயனர் பார்த்துக்கொண்டிருந்ததை மாற்றுகிறது. காரணம் ஏறக்குறைய எப்போதும் இடம் ஒதுக்கப்படாமல் load ஆகும் content.
CLS, காணக்கூடிய content ஏற்கனவே paint செய்யப்பட்ட பிறகு நகரும்போது ஏற்படுகிறது, பயனர் பார்த்துக்கொண்டிருந்ததை மாற்றுகிறது. காரணம் ஏறக்குறைய எப்போதும் இடம் ஒதுக்கப்படாமல் load ஆகும் content.
transform-க்குப் பதிலாக layout property-களை (top, height) animate செய்தல்.width/height (அல்லது aspect-ratio)-ஐ அமைக்கவும்:<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 என்பது மிகவும் சரிசெய்யக்கூடிய Core Web Vital — இது பொதுவாக ஒரு சில விடுபட்ட dimension-கள். நீங்கள் render pipeline-ஐ புரிந்துகொள்கிறீர்களா என்பதைச் சோதிக்க interviewer-கள் இதைப் பயன்படுத்துகிறார்கள்: முன்பே இடம் ஒதுக்குவது என்பது browser ஒருபோதும் reflow செய்யத் தேவையில்லை என்பதைக் குறிக்கிறது, top-ஐ animate செய்வதை விட transform ஏன் சிறந்தது என்பதற்கான காரணம் இதுவே.
விரிவான பதில்களுடன் கூடிய IT நேர்காணல் கேள்விகளின் நூலகம் — Junior முதல் Senior வரை.
நன்கொடை