بهبود عملکرد رندر در Blazor بوسیله قابلیت component virtualization - قسمت 2

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