مجازی‌سازی فهرست‌های بزرگ با Angular CDK

با پیاده‌سازی پیمایش مجازی، فهرست‌های بزرگ را واکنش‌گراتر کنید.

Stephen Fluin

فهرست پیمایشی یکی از رایج‌ترین الگوهای واسط کاربر امروزی است، چه درحال مرور فید پیمایش بی‌پایان در سایت رسانه اجتماعی موردعلاقه‌تان باشید، چه درحال پیمایش داشبورد سازمانی باشید. وقتی فهرست‌های پیمایشی بسیار طولانی می‌شوند (صدها، هزاران، یا صدها هزار مورد)، عملکرد برنامه ممکن است دچار مشکل شود.

فهرست‌های بزرگ ممکن است به‌کندی بار شوند زیرا برنامه باید همه داده‌ها را ازقبل بار و رندر کند. همچنین ممکن است رندر کردن و پیمایش آن‌ها کند باشد زیرا هر مورد در فهرست می‌تواند داده‌های غنی، رسانه، و عملکرد داشته باشد.

کاربران ممکن است هنگام بار کردن یا پیمایش صفحه با مشکلاتی مواجه شوند که منجر به ناامیدی و رها کردن صفحه می‌شود.

پیمایش مجازی در Angular با Component Dev Kit

پیمایش مجازی تکنیک اصلی مورداستفاده برای رفع این مشکلات مقیاس است. پیمایش مجازی با ارائه نوار پیمایش با اندازه مناسب و امکان پیمایش در فهرست بدون نیاز به اینکه برنامه کل فهرست را در حافظه نگه دارد یا آن را در صفحه ارائه کند، حس یک فهرست بسیار بزرگ را ایجاد می‌کند.

در 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
...
]
...

ایجاد ناحیه نمایش

برای دیدن نحوه عملکرد بسته، مؤلفه‌ای با فهرستی از اعداد از ۰ تا ۹۹٬۹۹۹ ایجاد کنید:

@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 در اسناد CDK می‌توانید درباره سایر قابلیت‌های ScrollingModule و دستورالعمل cdkVirtualOf بیشتر بدانید.