Angular सीडीके की मदद से, बड़ी सूचियों को वर्चुअल तरीके से इस्तेमाल करें

वर्चुअल स्क्रोलिंग लागू करके, बड़ी सूचियों को ज़्यादा रिस्पॉन्सिव बनाएं.

Stephen Fluin

स्क्रोल करने की सूची, आज-कल सबसे ज़्यादा इस्तेमाल होने वाले यूज़र इंटरफ़ेस (यूआई) पैटर्न में से एक है. चाहे, अपनी पसंदीदा सोशल मीडिया साइट पर अनलिमिटेड स्क्रोलिंग फ़ीड को ब्राउज़ करना हो या किसी एंटरप्राइज़ डैशबोर्ड को नेविगेट करना हो. जब स्क्रोलिंग सूचियां बहुत लंबी (सैकड़ों, हज़ारों या लाखों आइटम) हो जाती हैं, तो ऐप्लिकेशन की परफ़ॉर्मेंस पर असर पड़ सकता है.

बड़ी सूचियां धीरे-धीरे लोड हो सकती हैं, क्योंकि ऐप्लिकेशन को लोड होना चाहिए और पूरे डेटा को ऊपर की ओर रेंडर करना होगा. उन्हें रेंडर और नेविगेट करना भी धीमा हो सकता है, क्योंकि सूची में मौजूद हर आइटम में रिच डेटा , मीडिया, और फ़ंक्शन हो सकते हैं.

उपयोगकर्ताओं को पेज लोड या स्क्रोल करते समय समस्याएं आ सकती हैं. इससे उन्हें परेशानी होती है और वे पेज छोड़ देते हैं.

कॉम्पोनेंट डेव किट की मदद से, Angular में वर्चुअल स्क्रोलिंग

वर्चुअल स्क्रोलिंग मुख्य तकनीक है, जिसका इस्तेमाल स्केल की इन समस्याओं को हल करने के लिए किया जाता है. वर्चुअल स्क्रोलिंग, एक सही साइज़ का स्क्रोल बार देकर एक बहुत बड़ी सूची का इंप्रेशन दिखाती है. इससे सूची को नेविगेट करने की सुविधा भी मिलती है. इसके लिए, ऐप्लिकेशन को पूरी सूची को मेमोरी में रखने या पेज पर रेंडर करने की ज़रूरत नहीं होती.

Angular में, वर्चुअल स्क्रोलिंग की सुविधा कॉम्पोनेंट डेव किट (सीडीके) से मिलती है. सीडीके की वर्चुअल स्क्रोलिंग, सूचियों के तरीके में बदलाव करके और कुछ अतिरिक्त कॉन्फ़िगरेशन पैरामीटर देकर, आपकी सूचियों की वर्चुअल रेंडरिंग को अपने-आप मैनेज करती है. इससे पेज की परफ़ॉर्मेंस बेहतर होती है और जवाब देने में मदद मिलती है.

पूरी सूची को एक साथ रेंडर करने के बजाय, स्क्रीन पर फ़िट होने वाले आइटम के सिर्फ़ एक सबसेट (साथ ही एक छोटा बफ़र) को रेंडर किया जाएगा. जब उपयोगकर्ता नेविगेट करता है, तो आइटम के नए सबसेट की गिनती और उसे रेंडर किया जाता है. साथ ही, ज़रूरत पड़ने पर मौजूदा DOM का फिर से इस्तेमाल किया जाता है.

इस पोस्ट के बाकी हिस्से में, बुनियादी वर्चुअल स्क्रोलिंग सेट अप करने का तरीका बताया गया है. इस सैंपल ऐप्लिकेशन में, काम करने का पूरा उदाहरण देखा जा सकता है:

वर्चुअल स्क्रोलिंग की सुविधा सेट अप करना

सबसे पहले, यह पक्का करें कि आपने @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 डायरेक्टिव के बारे में ज़्यादा जानने के लिए, सीडीके दस्तावेज़ में Scrolling के बारे में पढ़ें.

Unsplash पर मिस्टर कप / फ़ैबियन बाराल की हीरो इमेज.