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

يمكنك تحسين أداء القوائم الكبيرة من خلال استخدام ميزة "التمرير الافتراضي".

Stephen Fluin

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

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

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

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

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

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

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

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

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

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

npm install --save @angular/cdk

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

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

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.

الصورة الرئيسية مقدمة من Mr Cup / Fabien Barral على Unsplash.