ভার্চুয়াল স্ক্রোলিং প্রয়োগ করে বড় তালিকাগুলিকে আরও প্রতিক্রিয়াশীল করুন।
স্ক্রোলিং তালিকাটি আজকের সবচেয়ে সাধারণ UI প্যাটার্নগুলির মধ্যে একটি, এটি আপনার প্রিয় সোশ্যাল মিডিয়া সাইটে একটি অসীম স্ক্রলিং ফিড ব্রাউজ করা, বা একটি এন্টারপ্রাইজ ড্যাশবোর্ড নেভিগেট করা। যখন স্ক্রলিং তালিকা খুব দীর্ঘ হয়ে যায় (শত, হাজার, বা কয়েক হাজার আইটেম), অ্যাপ্লিকেশন কার্যকারিতা ক্ষতিগ্রস্ত হতে পারে।
বড় তালিকাগুলি লোড হতে ধীর হতে পারে কারণ অ্যাপ্লিকেশনটিকে অবশ্যই লোড করতে হবে এবং সমস্ত ডেটা সামনে রেন্ডার করতে হবে৷ এগুলি রেন্ডার এবং নেভিগেট করতেও ধীর হতে পারে কারণ তালিকার প্রতিটি আইটেমে সমৃদ্ধ ডেটা, মিডিয়া এবং কার্যকারিতা থাকতে পারে৷
ব্যবহারকারীরা যখন পৃষ্ঠাটি লোড বা স্ক্রোল করে তখন সমস্যা অনুভব করতে পারে, যা হতাশা এবং পৃষ্ঠা পরিত্যাগের দিকে পরিচালিত করে।
কম্পোনেন্ট ডেভ কিটের সাথে কৌণিকভাবে ভার্চুয়াল স্ক্রোলিং
ভার্চুয়াল স্ক্রোলিং হল প্রাথমিক কৌশল যা এই স্কেল সমস্যাগুলি সমাধান করার জন্য ব্যবহৃত হয়। ভার্চুয়াল স্ক্রোলিং একটি খুব বড় তালিকার ছাপ দেয় - একটি উপযুক্ত আকারের স্ক্রোল বার প্রদান করে - এবং অ্যাপ্লিকেশনটিকে পুরো তালিকাটি মেমরিতে ধরে রাখার বা পৃষ্ঠায় রেন্ডার করার প্রয়োজন ছাড়াই তালিকাটি নেভিগেট করার ক্ষমতা দেয়৷
কৌণিক ভাষায়, কম্পোনেন্ট ডেভ কিট (CDK) দ্বারা ভার্চুয়াল স্ক্রোলিং প্রদান করা হয়। তালিকার মাধ্যমে আপনি যেভাবে পুনরাবৃত্তি করেন তা পরিবর্তন করে এবং কয়েকটি অতিরিক্ত কনফিগারেশন প্যারামিটার সরবরাহ করে, CDK-এর ভার্চুয়াল স্ক্রলিং স্বয়ংক্রিয়ভাবে আপনার তালিকাগুলির ভার্চুয়াল রেন্ডারিং পরিচালনা করবে, পৃষ্ঠার কর্মক্ষমতা এবং প্রতিক্রিয়াশীলতা উন্নত করবে।
একবারে সম্পূর্ণ তালিকা রেন্ডার করার পরিবর্তে, স্ক্রিনে ফিট করা আইটেমগুলির শুধুমাত্র একটি উপসেট (একটি ছোট বাফার) রেন্ডার করা হবে। ব্যবহারকারী নেভিগেট করার সাথে সাথে, আইটেমগুলির একটি নতুন উপসেট গণনা করা হয় এবং রেন্ডার করা হয়, যদি ইচ্ছা হয় তবে বিদ্যমান 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);
}
যখন ব্রাউজার অ্যাপটি রেন্ডার করে, তখন এটিকে 100,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 গতিশীলভাবে তালিকার উপসেটগুলি রেন্ডার করে, আপনাকে স্ট্যান্ডার্ড 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 নির্দেশের অন্যান্য ক্ষমতা সম্পর্কে আরও জানতে পারেন।
আনস্প্ল্যাশে মিস্টার কাপ / ফ্যাবিয়ান ব্যারালের হিরো ছবি।