لیست های بزرگ را با Angular CDK مجازی سازی کنید

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

Stephen Fluin

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

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

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

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

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

در Angular، پیمایش مجازی توسط Component Dev Kit (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
...
]
...

یک viewport ایجاد کنید

برای مشاهده نحوه عملکرد بسته، سعی کنید یک جزء با یک لیست ساده از اعداد از 0 تا 99999 ایجاد کنید:

@Component({
  template: `<div *ngFor="let item of list">{{item}}</div>`
})
export class ScrollComponent {
  list = Array.from({length: 100000}).map((_, i) => i);
}

وقتی مرورگر برنامه را رندر می‌کند، باید 100000 عنصر <div> را رندر کند. این ممکن است برای گره‌های متنی ساده خوب باشد، اما هر گونه پیچیدگی در قالب تکراری به خوبی مقیاس نمی‌شود، و شنوندگان رویدادها به طور قابل‌توجهی چند برابر می‌شوند.

برای افزودن پیمایش مجازی و اجتناب از این مشکلات، باید با قرار دادن لیست در عنصر <cdk-virtual-scroll-viewport> یک 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 به viewport اشاره ای در مورد محتوای آن بدهید. ماژول از این اطلاعات برای تعیین تعداد آیتم‌هایی که در یک زمان معین در 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);
}

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

جلوتر رفتن

توانایی‌های اسکرول مجازی CDK بسیار فراتر از این مثال اساسی است. در برنامه نمونه ، کل لیست در حافظه بود، اما لیست را می‌توان در صورت تقاضا برای برنامه‌های پیچیده‌تر واکشی کرد. می توانید با مطالعه در مورد Scrolling در اسناد CDK، درباره سایر قابلیت های ScrollingModule و دستورالعمل cdkVirtualOf اطلاعات بیشتری کسب کنید.

تصویر قهرمان توسط Mr Cup / Fabien Barral در Unsplash .