توجه : این مطلب برداشتی از نوشته ی Dave Brock می باشد
برای دیدن نمونه کدهای مطلب لطفا کمی صبر کنید
برای دیدن قسمت اول مطلب بر روی (اینجا) کلیک کنید
برای نمایش دیتاست های حجیم در ورژن دات نت 5 Blazor ، قابلیت جدیدی افزوده شده که با هم بررسی خواهیم کرد.
بیایید بیشتر بررسی کنیم. تفاوت شیوه ی قبلی و شیوه جدید در تعداد زیادی از اطلاعات Load شده در حافظه مشخص می شود. تعداد 10000 شئ از کلاس Car می سازیم (در متد OnInitializedAsync). می خواهیم در @codeاین لیست را نمایش دهیم.
تاکنون برای نمایش اطلاعات به روش زیر عمل می کردیم:
برنامه را run می کنیم و همزمان developer tools مرورگر خود را نیز به کار می گیریم و cache مرورگر را نیز غیرفعال می کنیم. برنامه در حالتی که از حلقه for استفاده کرده ایم، بین 2 تا 4 ثانیه طول می کشد تا بالا بیاید. حال حلقه را بصورت زیر جایگزین می کنیم:
در این حالت بین 1.2 تا 1.9 ثانیه نمایش اطلاعات طول می کشد که بهبود 2 برابری را نشان می دهد. حال چشم خود را از Developer tools خود بر ندارید و صفحه را scroll کنید. من در صفحه خود این کار را کرده ام:
همانطور که در ویدئو می بینید، ردیف های اطلاعاتی در صفحه ثابت است و اطلاعات جدید در ردیف های قبلی جای گذاری می شوند. اما این نمایش اطلاعات قابل customize شدن است. بدین منظور پارامتر های OverscanCount، ItemsDelegate، Placeholder و ItemSizeاست.
پارامتر OverscanCount
این پارامتر مشخص می کند که چند آیتم بیشتر از آنچه در صفحه قابل نمایش است در قبل و بعد render شود. پیش از این گفته بودم که خود برنامه با توجه به ابعاد صفحه نمایش کاربر، محاسبه می کند که چند آیتم در صفحه باید دیده شوند و با scroll شدن تعداد آیتم های render شده تغییر نمی کند. با عدد دادن به این پارامتر می توان مشخص کرد که چند آیتم از قبل از اولین آیتم قابل دیدن و چند آیتم بعد از آخرین آیتم قابل دیدن render شوند تا این آیتم ها در scroll های کاربر فقط نمایش یابند. با گذر از این آیتم ها، آیتم های جدید با همین شرایط render می شوند.
پیاده سازی Lazy Loading با استفاده از ItemsProvider و Placeholder
امکان پیاده سازی سناریو Lazy Loading با استفاده از Virtualize به خوبی در دسترس است. ItemsProvider یک Delegate است و می توان متد هایی با ورودی ItemsProviderRequest و خروجی ItemsProviderResult به آن Assign کرد.
کلاس ItemsProviderRequest مشخص کننده ی اطلاعاتی است که می خواهیم در render بعدی، آنها را به کاربر نمایش دهیم : مثلا از چه ردیف شماره چند لیست اطلاعات، به چه تعداد از آن شماره ردیف به بعد و..
کلاس ItemsProviderResult مشخص کننده ی لیست اقلام اطلاعاتی است که نمایش خواهند یافت.
بیاید متدی را که باید بنویسیم را ببینیم :
من با استفاده از LINQ کاری می کنم تا در هر بار فراخوانی این متد، اطلاعات مورد نظرم در صفحه render شوند.
حال نوبت Placeholder است. اگر به کد های نوشته شده در فایل cartable.cs توجه کرده باشید می بینید برای آنکه در هنگام ساخت لیست اطلاعات، کاربر صفحه را خالی نبیند و احساس از دسترس خارج شدن برنامه به او دست ندهد از قطعه کد زیر استفاده می کردیم:
در اینجا ما می توانیم این بلاک را حذف کنیم و کد های زیر را جایگزین کنیم :
پارامتر ItemSize
با عدد دادن به این پارامتر، اندازه هر آیتم مشخص می شود. مقدار پیش فرض آن 50px است (منبع)
