ভার্চুয়াল স্ক্রলিং প্রয়োগ করে বড় তালিকাগুলোকে আরও বেশি রেসপন্সিভ করুন।
স্ক্রলিং লিস্ট বর্তমানে সবচেয়ে প্রচলিত UI প্যাটার্নগুলোর মধ্যে একটি, তা আপনার প্রিয় সোশ্যাল মিডিয়া সাইটে একটি ইনফিনিটলি স্ক্রলিং ফিড ব্রাউজ করাই হোক, বা কোনো এন্টারপ্রাইজ ড্যাশবোর্ডে নেভিগেট করাই হোক। যখন স্ক্রলিং লিস্টগুলো খুব দীর্ঘ হয়ে যায় (শত শত, হাজার হাজার বা লক্ষ লক্ষ আইটেম), তখন অ্যাপ্লিকেশনের পারফরম্যান্স ক্ষতিগ্রস্ত হতে পারে।
বড় তালিকা লোড হতে ধীর হতে পারে, কারণ অ্যাপ্লিকেশনটিকে আগে থেকেই সমস্ত ডেটা লোড এবং রেন্ডার করতে হয়। এগুলি রেন্ডার এবং নেভিগেট করতেও ধীর হতে পারে, কারণ তালিকার প্রতিটি আইটেমে প্রচুর ডেটা, মিডিয়া এবং কার্যকারিতা থাকতে পারে।
পৃষ্ঠা লোড বা স্ক্রোল করার সময় ব্যবহারকারীরা সমস্যার সম্মুখীন হতে পারেন, যার ফলে তারা হতাশ হয়ে পড়েন এবং পৃষ্ঠাটি ছেড়ে দেন।
কম্পোনেন্ট ডেভ কিট ব্যবহার করে অ্যাঙ্গুলারে ভার্চুয়াল স্ক্রলিং
এই স্কেল সমস্যাগুলো সমাধানের জন্য ভার্চুয়াল স্ক্রলিং হলো ব্যবহৃত প্রধান কৌশল। ভার্চুয়াল স্ক্রলিং একটি উপযুক্ত আকারের স্ক্রল বার প্রদান করে তালিকাটিকে অনেক বড় বলে মনে করায় এবং অ্যাপ্লিকেশনটিকে সম্পূর্ণ তালিকাটি মেমরিতে ধরে রাখতে বা পৃষ্ঠায় রেন্ডার করার প্রয়োজন ছাড়াই তালিকাটি নেভিগেট করার সুযোগ দেয়।
অ্যাঙ্গুলারে, ভার্চুয়াল স্ক্রলিং কম্পোনেন্ট ডেভ কিট (CDK) দ্বারা সরবরাহ করা হয়। লিস্টের মধ্যে দিয়ে পুনরাবৃত্তি করার পদ্ধতি পরিবর্তন করে এবং কয়েকটি অতিরিক্ত কনফিগারেশন প্যারামিটার সরবরাহ করার মাধ্যমে, CDK-এর ভার্চুয়াল স্ক্রলিং স্বয়ংক্রিয়ভাবে আপনার লিস্টগুলোর ভার্চুয়াল রেন্ডারিং পরিচালনা করবে, যা পেজের পারফরম্যান্স এবং রেসপন্সিভনেস উন্নত করবে।
একবারে সম্পূর্ণ তালিকাটি রেন্ডার করার পরিবর্তে, স্ক্রিনে আঁটা যায় এমন আইটেমগুলোর একটি উপসেট (সাথে একটি ছোট বাফার) রেন্ডার করা হবে। ব্যবহারকারী যখন নেভিগেট করেন, তখন আইটেমগুলোর একটি নতুন উপসেট গণনা করে রেন্ডার করা হয় এবং চাইলে বিদ্যমান DOM-কে পুনরায় ব্যবহার করা হয়।
এই পোস্টের বাকি অংশে বেসিক ভার্চুয়াল স্ক্রলিং কীভাবে সেট আপ করতে হয় তা ধাপে ধাপে দেখানো হয়েছে। এই স্যাম্পল অ্যাপটিতে আপনি একটি সম্পূর্ণ কার্যকরী উদাহরণ দেখতে পারেন:
ভার্চুয়াল স্ক্রোলিং সেট আপ করা
প্রথমে নিশ্চিত হয়ে নিন যে আপনি আপনার পছন্দের প্যাকেজ ম্যানেজার ব্যবহার করে @angular/cdk ইনস্টল করেছেন। npm ব্যবহার করে এটি ইনস্টল করতে টার্মিনালে এই কমান্ডটি চালান:
npm install --save @angular/cdk
আপনার অ্যাপে ScrollingModule যোগ করুন
CDK ইনস্টল করা হয়ে গেলে, @angular/cdk/scrolling প্যাকেজ থেকে ScrollingModule ইম্পোর্ট করুন, যা ভার্চুয়াল স্ক্রলিং পরিচালনা করে। তারপর এটিকে আপনার মডিউলের imports অ্যারেতে যুক্ত করুন:
import {ScrollingModule} from '@angular/cdk/scrolling';
...
imports: [
ScrollingModule
...
]
...
একটি ভিউপোর্ট তৈরি করুন
প্যাকেজটি কীভাবে কাজ করে তা দেখতে, ০ থেকে ৯৯,৯৯৯ পর্যন্ত সংখ্যার একটি তালিকা দিয়ে একটি কম্পোনেন্ট তৈরি করার চেষ্টা করুন:
@Component({
template: `<div *ngFor="let item of list">{{item}}</div>`
})
export class ScrollComponent {
list = Array.from({length: 100000}).map((_, i) => i);
}
যখন ব্রাউজার অ্যাপটি রেন্ডার করে, তখন তাকে ১,০০,০০০টি স্বতন্ত্র <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 তালিকার উপসেটগুলিকে ডায়নামিকভাবে রেন্ডার করে, তাই আপনাকে স্ট্যান্ডার্ড CSS ব্যবহার করে ভিউপোর্টের উচ্চতা নির্দিষ্ট করতে হবে। এছাড়াও, 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-এর ভার্চুয়াল স্ক্রল করার ক্ষমতা এই সাধারণ উদাহরণের চেয়ে অনেক বেশি বিস্তৃত। নমুনা অ্যাপটিতে , সম্পূর্ণ তালিকাটি মেমরিতে ছিল, কিন্তু আরও জটিল অ্যাপ্লিকেশনের জন্য প্রয়োজন অনুযায়ী তালিকাটি ফেচ করা যেতে পারে। আপনি CDK ডকুমেন্টেশনে Scrolling সম্পর্কে পড়ে ScrollingModule এবং cdkVirtualOf ডিরেক্টিভের অন্যান্য ক্ষমতা সম্পর্কে আরও জানতে পারবেন।