आलसी लोडिंग और अनंत स्क्रॉल

Intersection Observer API

Element कब viewport में आता है यह पता करें: new IntersectionObserver((entries) => { entries.forEach(e => e.isIntersecting && loadImage(e.target)); })। Scroll listeners की ज़रूरत नहीं। Scroll events से ज़्यादा efficient।

आलसी लोडिंग रणनीतियां

Images के लिए native loading="lazy", JavaScript के लिए dynamic imports, और critical resources के लिए <link rel=preload>। Layout बनाए रखने और CLS घटाने के लिए placeholders (blur-up, skeleton screens) इस्तेमाल करें।

आलसी लोडिंग प्रदर्शन लाभ

लंबे pages पर आम तौर पर initial payload 30-50% घटता है। LCP और FCP बेहतर होते हैं। लेकिन सावधानी से implement न किया जाए तो scroll performance बिगड़ सकती है। Real devices पर test करें।

त्वरित जाँच

त्वरित जाँच: Intersection Observer का उपयोग किसके लिए किया जाता है?

• पृष्ठ लोड समय को मापना
• छवियों को संपीड़ित करना
• जब तत्व व्यूपोर्ट में प्रवेश करते हैं तो पहचान करना
• Network requests को encrypt करना