虚拟化大数据的最有效方法是什么？

发布于 2025-02-11 05:59:48 字数 1104 浏览 1 评论 0原文

我有一个包含图表和图像的卡列表。由于图表数据和图像请求放缓我的应用程序，因此我认为遵循虚拟化技术。我目前正在使用NGX-Perfect-Scrollbar，并且将使用它的虚拟滚动功能。但是我需要知道，我可以在不落后应用程序的情况下可视化数据的速度更快吗？

下面是我使用的代码段，我正在使用创建卡和接口的示例图像。

<perfect-scrollbar class="{{isMobileDevice ? 'mobile-perfect-scrollbar' : ''}}">
                <div class="wl_tile_container_holder">
                    <div *ngFor="let item of rowData" class="wl_tile_container" (click)="onClickTileView(item)">
                        <app-watchlist-tile [data]="item"
                        [isFullMarket]="isFullMarket"
                        [isDefinedWatchlist]="isDefinedWatchlist"
                        [selectedWatchList]="selectedWatchList"
                        [fullView]="fullView"
                        (menuItemClicked)="onSelectMenuItem($event)">
                        </app-watchlist-tile>
                    </div>
               </div>

原文

I have a list of cards that contains charts, images on it. Since the chart data and image requests slowdown my application, I thought to follow a virtualization technique. I'm currently using ngx-perfect-scrollbar and I'm about to use the virtual scrolling feature of it.
But I need to know is there a better and faster way that I can visualize the data without lagging the application?'

Below is the code snippet I'm using the create the cards and a sample image of the interface.

<perfect-scrollbar class="{{isMobileDevice ? 'mobile-perfect-scrollbar' : ''}}">
                <div class="wl_tile_container_holder">
                    <div *ngFor="let item of rowData" class="wl_tile_container" (click)="onClickTileView(item)">
                        <app-watchlist-tile [data]="item"
                        [isFullMarket]="isFullMarket"
                        [isDefinedWatchlist]="isDefinedWatchlist"
                        [selectedWatchList]="selectedWatchList"
                        [fullView]="fullView"
                        (menuItemClicked)="onSelectMenuItem($event)">
                        </app-watchlist-tile>
                    </div>
               </div>