CLS اس وقت ہوتا ہے جب نظر آنے والا content پہلے سے paint ہو جانے کے بعد ہلتا ہے، اور جو کچھ صارف دیکھ رہا تھا اسے کھسکا دیتا ہے۔ اس کی وجہ تقریباً ہمیشہ ایسا content ہوتا ہے جو محفوظ شدہ جگہ کے بغیر load ہوتا ہے۔
CLS اس وقت ہوتا ہے جب نظر آنے والا content پہلے سے paint ہو جانے کے بعد ہلتا ہے، اور جو کچھ صارف دیکھ رہا تھا اسے کھسکا دیتا ہے۔ اس کی وجہ تقریباً ہمیشہ ایسا content ہوتا ہے جو محفوظ شدہ جگہ کے بغیر load ہوتا ہے۔
top، height) بجائے transform کے۔width/height (یا aspect-ratio) سیٹ کریں تاکہ load سے پہلے جگہ محفوظ ہو جائے:<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 تاکہ web font آنے پر reflow کم سے کم ہو۔position: absolute) یا نیچے سے دھکیلیں۔transform/opacity سے animate کریں — یہ composited ہوتے ہیں اور layout trigger نہیں کرتے۔CLS سب سے زیادہ قابلِ اصلاح Core Web Vital ہے — یہ عموماً چند غائب dimensions کا معاملہ ہوتا ہے۔ Interviewers اسے یہ جانچنے کے لیے استعمال کرتے ہیں کہ آیا آپ render pipeline کو سمجھتے ہیں: پیشگی جگہ محفوظ کرنے کا مطلب ہے کہ browser کو کبھی reflow نہیں کرنا پڑتا، اور یہی وجہ ہے کہ transform، top کو animate کرنے پر فوقیت رکھتا ہے۔
تفصیلی جوابات کے ساتھ IT انٹرویو سوالات کی ایک لائبریری — جونیئر سے سینئر تک۔
عطیہ دیں