वर्चुअल स्क्रोलिंग की सुविधा लागू करके, बड़ी सूचियों को ज़्यादा रिस्पॉन्सिव बनाएं.
स्क्रोलिंग सूची, आज के समय में यूज़र इंटरफ़ेस (यूआई) के सबसे सामान्य पैटर्न में से एक है. भले ही, यह आपकी पसंदीदा सोशल मीडिया साइट पर अनलिमिटेड स्क्रोलिंग फ़ीड को ब्राउज़ करना हो या किसी एंटरप्राइज़ डैशबोर्ड पर नेविगेट करना हो. जब स्क्रोल करने वाली सूचियां बहुत लंबी हो जाती हैं (सैकड़ों, हज़ारों या लाखों आइटम), तो ऐप्लिकेशन की परफ़ॉर्मेंस पर असर पड़ सकता है.
बड़ी सूचियां लोड होने में ज़्यादा समय लग सकता है, क्योंकि ऐप्लिकेशन को सारा डेटा पहले लोड और रेंडर करना होता है. इनमें रेंडर होने और नेविगेट करने में भी ज़्यादा समय लग सकता है. इसकी वजह यह है कि सूची में मौजूद हर आइटम में ज़्यादा डेटा , मीडिया, और सुविधाएं हो सकती हैं.
पेज को लोड या स्क्रोल करते समय, उपयोगकर्ताओं को समस्याएं आ सकती हैं. इससे वे परेशान हो सकते हैं और पेज को छोड़ सकते हैं.
कॉम्पोनेंट डेवलपमेंट किट की मदद से, Angular में वर्चुअल स्क्रोलिंग
स्केल से जुड़ी इन समस्याओं को हल करने के लिए, वर्चुअल स्क्रोलिंग की मुख्य तकनीक का इस्तेमाल किया जाता है. वर्चुअल स्क्रोलिंग की सुविधा से, सही साइज़ का स्क्रोल बार उपलब्ध कराने के साथ-साथ, बहुत बड़ी सूची का एहसास होता है. साथ ही, सूची में नेविगेट करने की सुविधा भी मिलती है. इसके लिए, ऐप्लिकेशन को पूरी सूची को मेमोरी में सेव करने या उसे पेज पर रेंडर करने की ज़रूरत नहीं होती.
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 की वैल्यू देकर, व्यूपोर्ट को उसके कॉन्टेंट के बारे में भी बताना होगा. मॉड्यूल इस जानकारी का इस्तेमाल करके यह तय करता है कि किसी तय समय पर DOM में कितने आइटम रखने हैं और सही साइज़ का स्क्रोलबार कैसे रेंडर करना है.
@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 की हीरो इमेज.