CLS ਉਦੋਂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਦਿਖਣਯੋਗ content ਪਹਿਲਾਂ ਹੀ paint ਹੋ ਜਾਣ ਤੋਂ ਬਾਅਦ ਹਿੱਲਦਾ ਹੈ, ਜਿਸ ਵੱਲ ਉਪਭੋਗਤਾ ਦੇਖ ਰਿਹਾ ਸੀ ਉਸਨੂੰ ਖਿਸਕਾ ਦਿੰਦਾ ਹੈ। ਕਾਰਨ ਲਗਭਗ ਹਮੇਸ਼ਾ ਬਿਨਾਂ reserved ਥਾਂ ਦੇ load ਹੋਣ ਵਾਲਾ content ਹੁੰਦਾ ਹੈ।
CLS ਉਦੋਂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਦਿਖਣਯੋਗ content ਪਹਿਲਾਂ ਹੀ paint ਹੋ ਜਾਣ ਤੋਂ ਬਾਅਦ ਹਿੱਲਦਾ ਹੈ, ਜਿਸ ਵੱਲ ਉਪਭੋਗਤਾ ਦੇਖ ਰਿਹਾ ਸੀ ਉਸਨੂੰ ਖਿਸਕਾ ਦਿੰਦਾ ਹੈ। ਕਾਰਨ ਲਗਭਗ ਹਮੇਸ਼ਾ ਬਿਨਾਂ reserved ਥਾਂ ਦੇ load ਹੋਣ ਵਾਲਾ content ਹੁੰਦਾ ਹੈ।
transform ਦੀ ਬਜਾਏ layout properties (top, height) ਨੂੰ animate ਕਰਨਾ।width/height (ਜਾਂ aspect-ratio) ਸੈੱਟ ਕਰੋ ਤਾਂ ਜੋ load ਤੋਂ ਪਹਿਲਾਂ ਥਾਂ reserve ਹੋਵੇ:<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 ਸਮਝਦੇ ਹੋ: ਪਹਿਲਾਂ ਤੋਂ ਥਾਂ reserve ਕਰਨ ਦਾ ਮਤਲਬ ਹੈ browser ਨੂੰ ਕਦੇ reflow ਨਹੀਂ ਕਰਨਾ ਪੈਂਦਾ, ਜਿਸ ਕਰਕੇ transform, top ਨੂੰ animate ਕਰਨ ਨਾਲੋਂ ਬਿਹਤਰ ਹੈ।
ਵਿਸਤ੍ਰਿਤ ਜਵਾਬਾਂ ਨਾਲ IT ਇੰਟਰਵਿਊ ਸਵਾਲਾਂ ਦੀ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ — ਜੂਨੀਅਰ ਤੋਂ ਸੀਨੀਅਰ ਤੱਕ।
ਦਾਨ ਕਰੋ