‫بررسی کامپوننت Virtualize در Blazor: بهینه‌سازی رندر لیست‌های بزرگ

• بهبود عملکرد: کاهش تعداد عناصر DOM باعث کاهش مصرف حافظه و افزایش سرعت رندر می‌شود.
• کاهش تأخیر: بارگذاری تدریجی داده‌ها از تأخیرهای طولانی در رندر اولیه جلوگیری می‌کند.
• پشتیبانی از داده‌های بزرگ: امکان نمایش لیست‌های بسیار بزرگ (حتی با میلیون‌ها آیتم) بدون افت عملکرد فراهم می‌شود.

<Virtualize Items="items" Context="item">
    <div>@item.Name</div>
</Virtualize>

@code {
    private List<ItemModel> items = Enumerable.Range(1, 1000)
        .Select(i => new ItemModel { Id = i, Name = $"Item {i}" })
        .ToList();
}

1. Items: منبع داده اصلی که می‌تواند یک IEnumerable<T> یا ICollection<T> باشد. این پارامتر برای لیست‌های ثابت مناسب است.
2. ItemsProvider: برای بارگذاری پویا و تدریجی داده‌ها (مانند داده‌های دریافتی از یک API یا پایگاه داده) استفاده می‌شود. این پارامتر یک delegate از نوع ItemsProviderDelegate<T> را می‌پذیرد که داده‌ها را به‌صورت ناهمگام (Asynchronous) بارگذاری می‌کند.
3. ItemSize: اندازه تقریبی هر آیتم در لیست (به پیکسل) را مشخص می‌کند. این پارامتر به Blazor کمک می‌کند تا تعداد آیتم‌های قابل‌مشاهده را محاسبه کند. مقدار پیش‌فرض آن 50 پیکسل است.
4. OverscanCount: تعداد آیتم‌های اضافی که قبل و بعد از محدوده قابل‌مشاهده رندر می‌شوند. این ویژگی به بهبود تجربه اسکرول روان کمک می‌کند. مقدار پیش‌فرض آن 3 است.
5. ItemContent: یک قالب رندر (Render Fragment) که مشخص می‌کند هر آیتم چگونه نمایش داده شود.
6. Placeholder: یک قالب برای نمایش آیتم‌های در حال بارگذاری (Loading Placeholder) زمانی که داده‌ها هنوز در دسترس نیستند.

<Virtualize ItemsProvider="LoadItems" Context="item">
    <ItemContent>
        <div>@item.Name</div>
    </ItemContent>
    <Placeholder>
        <div>Loading...</div>
    </Placeholder>
</Virtualize>

@code {
    private async ValueTask<ItemsProviderResult<ItemModel>> LoadItems(ItemsProviderRequest request)
    {
        // شبیه‌سازی دریافت داده از API
        var items = await Task.Delay(500).ContinueWith(_ =>
            Enumerable.Range(request.StartIndex, request.Count)
                .Select(i => new ItemModel { Id = i + 1, Name = $"Item {i + 1}" })
                .ToList());

        return new ItemsProviderResult<ItemModel>(items, totalItemCount: 10000);
    }
}

<Virtualize Items="items" Context="item">
    <ItemContent>
        <div @key="item.Id">
            <input type="checkbox" @bind="item.IsSelected" /> @item.Name
        </div>
    </ItemContent>
</Virtualize>

1. انتخاب ItemSize مناسب: تنظیم دقیق ItemSize متناسب با ارتفاع واقعی آیتم‌ها می‌تواند از مشکلات اسکرول مانند پرش (Jumping) جلوگیری کند. اگر آیتم‌ها ارتفاع متغیری دارند، از CSS برای اطمینان از ارتفاع ثابت استفاده کنید.
2. بهینه‌سازی ItemsProvider: هنگام استفاده از ItemsProvider، درخواست‌های سرور را با کش کردن (Caching) یا محدود کردن تعداد درخواست‌ها (Debouncing) بهینه کنید تا از بار اضافی روی سرور جلوگیری شود.
3. مدیریت Placeholder: استفاده از یک Placeholder مناسب، تجربه کاربری بهتری در زمان بارگذاری داده‌ها فراهم می‌کند. اطمینان حاصل کنید که Placeholder از نظر بصری با آیتم‌های واقعی سازگار است.
4. آزمایش در سناریوهای واقعی: عملکرد <Virtualize> را با داده‌های واقعی و در مرورگرهای مختلف تست کنید، زیرا رفتار اسکرول ممکن است بسته به مرورگر متفاوت باشد.
5. ترکیب با Lazy Loading: برای داده‌های بسیار بزرگ، <Virtualize> را با تکنیک‌های Lazy Loading در سمت سرور ترکیب کنید تا فقط داده‌های موردنیاز بارگذاری شوند.

• عدم پشتیبانی از لیست‌های دوبعدی: در حال حاضر، <Virtualize> تنها برای لیست‌های خطی (عمودی یا افقی) طراحی شده و از گریدهای دوبعدی پشتیبانی نمی‌کند.
• پیچیدگی در سناریوهای پویا: اگر ارتفاع آیتم‌ها به‌صورت پویا تغییر کند، ممکن است نیاز به تنظیمات اضافی در CSS یا JavaScript باشد.
• عملکرد در Blazor Server: در Blazor Server، تأخیر شبکه می‌تواند بر تجربه اسکرول تأثیر بگذارد، بنابراین بهینه‌سازی ارتباط SignalR ضروری است.