إنشاء قائمة افتراضية للقوائم الكبيرة باستخدام Angular CDK

اجعل القوائم الكبيرة أكثر استجابة من خلال تنفيذ التمرير الافتراضي.

Stephen Fluin

تُعدّ القائمة القابلة للتمرير من أكثر أنماط واجهة المستخدم شيوعًا اليوم، سواء كنت تتصفّح خلاصة قابلة للتمرير بلا حدود على موقع وسائل التواصل الاجتماعي المفضّل لديك أو تتنقّل في لوحة بيانات مؤسسة. عندما تصبح قوائم التمرير طويلة جدًا (مئات أو آلاف أو مئات الآلاف من العناصر)، قد يتأثر أداء التطبيق.

قد يستغرق تحميل القوائم الكبيرة وقتًا طويلاً لأنّ التطبيق يجب أن يحمّل جميع البيانات ويعرضها مسبقًا. وقد يكون عرضها والتنقّل فيها بطيئًا لأنّ كل عنصر في القائمة يمكن أن يتضمّن بيانات غنية ووسائط ووظائف.

قد يواجه المستخدمون مشاكل عند تحميل الصفحة أو التنقّل فيها، ما يؤدي إلى شعورهم بالإحباط وتركهم الصفحة.

التمرير الافتراضي في Angular باستخدام مجموعة تطوير المكوّنات

التمرير الافتراضي هو الأسلوب الأساسي المستخدَم لمعالجة مشاكل الحجم هذه. يمنح التمرير الافتراضي انطباعًا بوجود قائمة كبيرة جدًا، وذلك من خلال توفير شريط تمرير بالحجم المناسب، وإمكانية التنقّل في القائمة بدون الحاجة إلى أن يحتفظ التطبيق بالقائمة بأكملها في الذاكرة أو يعرضها على الصفحة.

في Angular، يتم توفير التمرير الافتراضي من خلال مجموعة تطوير المكوّنات (CDK). من خلال تعديل طريقة تكرار القوائم، وتوفير بعض مَعلمات الإعداد الإضافية، ستدير ميزة "التمرير السريع" في حزمة تطوير البرامج (CDK) عملية العرض الافتراضي للقوائم تلقائيًا، ما يؤدي إلى تحسين أداء الصفحة وسرعة استجابتها.

بدلاً من عرض القائمة بأكملها في كل مرة، سيتم عرض مجموعة فرعية فقط من العناصر التي تتناسب مع الشاشة (بالإضافة إلى مساحة تخزين مؤقت صغيرة). أثناء تنقّل المستخدم، يتم احتساب مجموعة فرعية جديدة من العناصر وعرضها، مع إعادة استخدام DOM الحالي إذا أردت ذلك.

توضّح بقية هذه المشاركة كيفية إعداد التمرير الافتراضي الأساسي. يمكنك الاطّلاع على مثال عملي كامل في نموذج التطبيق هذا:

إعداد التمرير الافتراضي

أولاً، تأكَّد من تثبيت @angular/cdk باستخدام مدير الحِزم المفضّل لديك. لتثبيته باستخدام npm، شغِّل الأمر التالي في الوحدة الطرفية:

npm install --save @angular/cdk

إضافة ScrollingModule إلى تطبيقك

بعد تثبيت CDK، استورِد ScrollingModule، الذي يتعامل مع التمرير الافتراضي، من حزمة @angular/cdk/scrolling. بعد ذلك، أضِفها إلى مصفوفة عمليات الاستيراد في الوحدة:

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 هذا المثال الأساسي بكثير. في نموذج التطبيق، كانت القائمة بأكملها مخزّنة في الذاكرة، ولكن يمكن جلب القائمة عند الطلب للتطبيقات الأكثر تعقيدًا. يمكنك الاطّلاع على مزيد من المعلومات حول الإمكانات الأخرى لـ ScrollingModule والأمر cdkVirtualOf من خلال قراءة معلومات حول Scrolling في مستندات CDK.