वर्चुअल स्क्रोलिंग की सुविधा का इस्तेमाल करके, बड़ी सूचियों को ज़्यादा रिस्पॉन्सिव बनाएं.
स्क्रोलिंग सूची, आज के सबसे आम यूज़र इंटरफ़ेस (यूआई) पैटर्न में से एक है. चाहे आपकी पसंदीदा सोशल मीडिया साइट पर अनलिमिटेड स्क्रोल करने वाला फ़ीड ब्राउज़ करना हो या एंटरप्राइज़ डैशबोर्ड पर नेविगेट करना हो. जब स्क्रोल करने वाली सूचियां बहुत लंबी हो जाती हैं (सैकड़ों, हज़ारों या लाखों आइटम), तो ऐप्लिकेशन की परफ़ॉर्मेंस पर असर पड़ सकता है.
बड़ी सूचियों को लोड होने में ज़्यादा समय लग सकता है, क्योंकि ऐप्लिकेशन को सारा डेटा पहले ही लोड और रेंडर करना होता है. इनमें रेंडर करने और नेविगेट करने में भी ज़्यादा समय लग सकता है, क्योंकि सूची में मौजूद हर आइटम में ज़्यादा डेटा, मीडिया, और सुविधाएं हो सकती हैं.
पेज को लोड या स्क्रोल करते समय, उपयोगकर्ताओं को समस्याओं का सामना करना पड़ सकता है. इससे उन्हें निराशा होती है और वे पेज छोड़कर चले जाते हैं.
कॉम्पोनेंट डेवलपमेंट किट के साथ, ऐंग्युलर में वर्चुअल स्क्रोलिंग
स्केल से जुड़ी इन समस्याओं को हल करने के लिए, वर्चुअल स्क्रोलिंग की मुख्य तकनीक का इस्तेमाल किया जाता है. वर्चुअल स्क्रोलिंग की सुविधा से, सही साइज़ का स्क्रोल बार मिलता है. इससे, सूची में नेविगेट करने की सुविधा मिलती है. इसके लिए, ऐप्लिकेशन को पूरी सूची को मेमोरी में सेव करने या उसे पेज पर रेंडर करने की ज़रूरत नहीं होती.
Angular में, वर्चुअल स्क्रोलिंग की सुविधा कॉम्पोनेंट डेवलपमेंट किट (सीडीके) से मिलती है. सूचियों को दोहराने के तरीके में बदलाव करके और कुछ अतिरिक्त कॉन्फ़िगरेशन पैरामीटर देकर, CDK का वर्चुअल स्क्रोलिंग आपकी सूचियों के वर्चुअल रेंडरिंग को अपने-आप मैनेज करेगा. इससे पेज की परफ़ॉर्मेंस और रिस्पॉन्सिवनेस बेहतर होगी.
एक बार में पूरी सूची को रेंडर करने के बजाय, स्क्रीन पर फ़िट होने वाले आइटम का सिर्फ़ एक सबसेट (साथ ही, एक छोटा बफ़र) रेंडर किया जाएगा. जब उपयोगकर्ता नेविगेट करता है, तो आइटम का एक नया सबसेट कैलकुलेट और रेंडर किया जाता है. साथ ही, ज़रूरत पड़ने पर मौजूदा डीओएम का फिर से इस्तेमाल किया जाता है.
इस पोस्ट के बाकी हिस्से में, बुनियादी वर्चुअल स्क्रोलिंग को सेट अप करने का तरीका बताया गया है. इस सैंपल ऐप्लिकेशन में, काम करने का पूरा उदाहरण देखा जा सकता है:
वर्चुअल स्क्रोलिंग की सुविधा सेट अप करना
सबसे पहले, पक्का करें कि आपने अपने पसंदीदा पैकेज मैनेजर का इस्तेमाल करके, @angular/cdk इंस्टॉल किया हो. इसे npm का इस्तेमाल करके इंस्टॉल करने के लिए, टर्मिनल में यह कमांड चलाएं:
npm install --save @angular/cdk
ScrollingModule को अपने ऐप्लिकेशन में जोड़ें
CDK इंस्टॉल होने के बाद, @angular/cdk/scrolling पैकेज से ScrollingModule को इंपोर्ट करें. इसमें, वर्चुअल स्क्रोलिंग मैनेज की जाती है. इसके बाद, इसे अपने मॉड्यूल के इंपोर्ट कलेक्शन में जोड़ें:
import {ScrollingModule} from '@angular/cdk/scrolling';
...
imports: [
ScrollingModule
...
]
...
व्यूपोर्ट बनाना
पैकेज के काम करने का तरीका जानने के लिए, 0 से 99,999 तक की संख्याओं की एक आसान सूची वाला कंपोनेंट बनाएं:
@Component({
template: `<div *ngFor="let item of list">{{item}}</div>`
})
export class ScrollComponent {
list = Array.from({length: 100000}).map((_, i) => i);
}
जब ब्राउज़र ऐप्लिकेशन को रेंडर करता है, तो उसे 1,00,000 अलग-अलग <div> एलिमेंट को रेंडर करना होता है. यह आसान टेक्स्ट नोड के लिए ठीक हो सकता है, लेकिन दोहराए गए टेंप्लेट में कोई भी जटिलता ठीक से स्केल नहीं होगी और किसी भी इवेंट लिसनर की संख्या काफ़ी बढ़ जाएगी.
वर्चुअल स्क्रोलिंग जोड़ने और इन समस्याओं से बचने के लिए, आपको सूची को <cdk-virtual-scroll-viewport> एलिमेंट में रैप करके व्यूपोर्ट बनाना होगा:
@Component({
template: `<cdk-virtual-scroll-viewport>
<div *ngFor="let item of list">{{item}}</div>
</cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
list = Array.from({length: 100000}).map((_, i) => i);
}
ScrollingModule, सूची के सबसेट को डाइनैमिक तौर पर रेंडर करता है. इसलिए, आपको स्टैंडर्ड सीएसएस की मदद से व्यूपोर्ट की ऊंचाई तय करनी होगी. आपको itemSize की जानकारी देकर, व्यूपोर्ट को उसके कॉन्टेंट के बारे में भी बताना होगा. मॉड्यूल इस जानकारी का इस्तेमाल यह तय करने के लिए करता है कि किसी दिए गए समय में डीओएम में कितने आइटम रखने हैं और सही साइज़ वाला स्क्रोलबार कैसे रेंडर किया जाए.
@Component({
template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
<div *ngFor="let item of list">{{item}}</div>
</cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
list = Array.from({length: 100000}).map((_, i) => i);
}
आखिर में, *ngFor को *cdkVirtualFor में बदलें:
@Component({
template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
<div *cdkVirtualFor="let item of list">{{item}}</div>
</cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
list = Array.from({length: 100000}).map((_, i) => i);
}
पूरी सूची को दोहराने के बजाय, व्यूपोर्ट उपयोगकर्ता के लिए सूची के सही सबसेट की डाइनैमिक तौर पर पहचान करेगा और उसे दोहराएगा. अब जब उपयोगकर्ता पेज को लोड करता है, तो CDK को सूची का वह सबसेट रेंडर करना चाहिए जो स्क्रीन पर फ़िट हो (साथ ही, थोड़ा बफ़र भी). साथ ही, व्यूपोर्ट में होने वाले किसी भी स्क्रोलिंग इवेंट से, सूची का सही सबसेट लोड और रेंडर होगा:
आगे बढ़ना
CDK की वर्चुअल स्क्रोल की सुविधाएं, इस बुनियादी उदाहरण से कहीं ज़्यादा बेहतर हैं. ऐप्लिकेशन के नमूने में, पूरी सूची मेमोरी में थी. हालांकि, ज़्यादा जटिल ऐप्लिकेशन की मांग करने पर यह सूची फ़ेच की जा सकती है. ScrollingModule और cdkVirtualOf डायरेक्टिव की अन्य सुविधाओं के बारे में ज़्यादा जानने के लिए, CDK दस्तावेज़ में Scrolling के बारे में पढ़ें.
Unsplash पर Mr Cup / Fabien Barral की हीरो इमेज.