إنشاء قائمة افتراضية للقوائم الكبيرة باستخدام 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.