वर्चुअल स्क्रोलिंग लागू करके, बड़ी सूचियों को ज़्यादा रिस्पॉन्सिव बनाएं.
स्क्रोल करने वाली सूची, आज के समय में सबसे ज़्यादा इस्तेमाल किए जाने वाले यूज़र इंटरफ़ेस (यूआई) पैटर्न में से एक है. चाहे वह आपकी पसंदीदा सोशल मीडिया साइट पर लगातार स्क्रोल होने वाले फ़ीड को ब्राउज़ करना हो या किसी एंटरप्राइज़ डैशबोर्ड पर नेविगेट करना हो. जब स्क्रोल करने वाली सूचियां बहुत लंबी हो जाती हैं (सैकड़ों, हज़ारों या लाखों आइटम), तो ऐप्लिकेशन की परफ़ॉर्मेंस पर असर पड़ सकता है.
बड़ी सूचियों को लोड होने में ज़्यादा समय लग सकता है, क्योंकि ऐप्लिकेशन को सभी डेटा को पहले ही लोड और रेंडर करना होता है. इनके रेंडर होने और नेविगेट करने में भी समय लग सकता है, क्योंकि सूची में मौजूद हर आइटम में रिच डेटा, मीडिया, और फ़ंक्शन शामिल हो सकते हैं.
पेज लोड करते समय या स्क्रोल करते समय, उपयोगकर्ताओं को समस्याएं आ सकती हैं. इससे वे निराश हो सकते हैं और पेज छोड़ सकते हैं.
कॉम्पोनेंट डेवलपमेंट किट की मदद से, Angular में वर्चुअल स्क्रोलिंग की सुविधा
वर्चुअल स्क्रोलिंग, स्केल से जुड़ी इन समस्याओं को हल करने के लिए इस्तेमाल की जाने वाली मुख्य तकनीक है. वर्चुअल स्क्रोलिंग से, बहुत बड़ी सूची का इंप्रेशन मिलता है. इसके लिए, यह सही साइज़ का स्क्रोल बार उपलब्ध कराता है. साथ ही, सूची में नेविगेट करने की सुविधा देता है. इसके लिए, ऐप्लिकेशन को पूरी सूची को मेमोरी में सेव करने या पेज पर रेंडर करने की ज़रूरत नहीं होती.
Angular में, वर्चुअल स्क्रोलिंग की सुविधा कॉम्पोनेंट डेवलपमेंट किट (सीडीके) के ज़रिए मिलती है. सूचियों को दोहराने के तरीके में बदलाव करके और कुछ अतिरिक्त कॉन्फ़िगरेशन पैरामीटर उपलब्ध कराकर, सीडीके की वर्चुअल स्क्रोलिंग सुविधा, आपकी सूचियों की वर्चुअल रेंडरिंग को अपने-आप मैनेज करेगी. इससे पेज की परफ़ॉर्मेंस और रिस्पॉन्सिवनेस बेहतर होगी.
पूरी सूची को एक साथ रेंडर करने के बजाय, सिर्फ़ उन आइटम के सबसेट को रेंडर किया जाएगा जो स्क्रीन पर फ़िट होते हैं. साथ ही, कुछ बफ़र भी रेंडर किया जाएगा. उपयोगकर्ता के नेविगेट करने पर, आइटम का नया सबसेट कैलकुलेट और रेंडर किया जाता है. अगर चाहें, तो मौजूदा डीओएम का फिर से इस्तेमाल किया जा सकता है.
इस पोस्ट के बाकी हिस्से में, बुनियादी वर्चुअल स्क्रोलिंग को सेट अप करने का तरीका बताया गया है. इस सैंपल के तौर पर मिले ऐप्लिकेशन में, काम करने वाले उदाहरण को देखा जा सकता है:
वर्चुअल स्क्रोलिंग सेट अप करना
सबसे पहले, पक्का करें कि आपने अपने पसंदीदा पैकेज मैनेजर का इस्तेमाल करके @angular/cdk इंस्टॉल कर लिया हो. इसे npm का इस्तेमाल करके इंस्टॉल करने के लिए, टर्मिनल में यह कमांड चलाएं:
npm install --save @angular/cdk
अपने ऐप्लिकेशन में ScrollingModule जोड़ना
सीडीके इंस्टॉल होने के बाद, @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);
}
पूरी सूची में बार-बार बदलाव करने के बजाय, व्यूपोर्ट उपयोगकर्ता के लिए सूची के सही सबसेट की पहचान करता है और उसमें बार-बार बदलाव करता है. अब जब उपयोगकर्ता पेज लोड करता है, तो सीडीके को स्क्रीन पर फ़िट होने वाली सूची के सबसेट को रेंडर करना चाहिए. साथ ही, व्यूपोर्ट में मौजूद स्क्रोलिंग इवेंट, सूची के सही सबसेट को लोड और रेंडर करते हैं:
ज़्यादा जानकारी
सीडीके की वर्चुअल स्क्रोलिंग की सुविधाएं, इस बुनियादी उदाहरण से कहीं ज़्यादा हैं. सैंपल के तौर पर मिले ऐप्लिकेशन में, पूरी सूची मेमोरी में थी. हालांकि, ज़्यादा जटिल ऐप्लिकेशन के लिए, सूची को ज़रूरत के हिसाब से फ़ेच किया जा सकता था. ScrollingModule और cdkVirtualOf डायरेक्टिव की अन्य सुविधाओं के बारे में ज़्यादा जानने के लिए, CDK के दस्तावेज़ में जाकर Scrolling के बारे में पढ़ें.