대용량 데이터 집합 지원은 가장 많이 요청되는 UI 컨트롤 기능 중의 하나이고 저희 주요 투자 영역 중 하나입니다. 대용량 데이터 집합을 처리할 때는 메모리 사용 공간과 성능, 두 가지 사항을 중요하게 고려해야 합니다. 이 문제를 해결하는 가장 좋은 방법은 데이터 가상화이며, 데이터 가상화를 사용하면 모든 데이터를 한곳으로 가져오지 않고도 전체 데이터 집합을 전체적으로 볼 수 있습니다.

일반적인 데이터 가상화 솔루션에는 클라이언트 측 페이지 매김 또는 커서 목록이 포함됩니다. 하지만 이 기법은 사용자의 가용성에 영향을 미치므로 대체로 일반적인 경우처럼 전체 데이터 집합을 쉽게 스크롤할 수 있는 기능을 제공하고자 합니다.

WPF용 .NET 6 FlexGrid를 통해 수백만 개의 행을 신속하게 처리할 수 있는 솔루션이 구현되었습니다. 하지만 처리하는 행이 10억 개에 도달하는 경우 여전히 성능 및 메모리 문제가 발견됩니다.

따라서, 저희는 새로운 기법을 구현하고 모든 작은 병목 현상을 극복하여 이 문제를 해결함으로써 성능 제한을 없애고 FlexGrid에서 모든 수의 행을 표시할 수 있도록 하기로 결정했습니다.

10억 개의 데이터 행을 로드할 준비가 되셨습니까?

지금 ComponentOne을 다운로드하십시오!

대량의 항목을 표시하려고 할 때 첫 번째로 고려할 것은 데이터 집합을 모두 메모리에 로드할 수 없다는 것입니다. 10억 개 null의<T> 목록을 만드는 데는 일반적으로 15초 정도 걸리고 8GB의 메모리가 사용됩니다. 그러므로 데이터 가상화 솔루션이 필요합니다.

이러한 목적으로 저희는 ComponentOne DataCollection 라이브러리에 추상 C1VirtualDataCollection 클래스를 제공합니다.

이 컬렉션을 상속하여 가상화된 콘텐츠를 제공할 수 있습니다.

구현 예:

   public class VirtualModeDataCollection : C1VirtualDataCollection<Customer>
  {
       public int TotalCount { get; set; } = 1_000_000_000;
​
       protected override async Task<Tuple<int, IReadOnlyList<Customer>>> GetPageAsync(int pageIndex, int startingIndex, int count, IReadOnlyList<SortDescription> sortDescriptions = null, FilterExpression filterExpression = null, CancellationToken cancellationToken = default(CancellationToken))
      {
           return new Tuple<int, IReadOnlyList<Customer>>(TotalCount, Enumerable.Range(startingIndex, count).Select(i => new Customer(i)).ToList());
      }
  }

성능과 메모리 사용 공간을 테스트하기 위해 컬렉션을 만들고, FlexGrid에서 컬렉션을 시각화할 때 발생하는 것과 비슷한 첫 번째 페이지를 로드합니다. 그런 다음 이전 컬렉션 및 향상된 기능이 포함된 컬렉션에 대해 동일한 작업을 반복합니다.

보시다시피, 10억 개 항목의 경우에도 새 버전에서 첫 번째 페이지의 로드 성능은 변하지 않았으며 메모리 사용 공간은 사소합니다. 이제 C1VirtualDataCollection의 최신 버전에서는 내부적으로 만드는 데 거의 아무것도 사용하지 않고 최소한의 메모리를 사용하는 동적 목록을 사용합니다.

FlexGrid의 골격 로딩

대부분의 성능 개선 기능이 DataCollection 내에 포함되지만 FlexGrid에도 향상된 기능이 있습니다.

이번 기회를 통해 FlexGrid에 골격 로딩이라고 하는 성능 감지에 도움이 되는 새로운 기능이 도입되었습니다. 이 기능은 모든 셀 내부에 "골격" 자리 표시자 애니메이션을 표시하여 밑에서 데이터가 로드되고 있음을 나타냅니다. 아래와 같은 동작을 통해 FlexGrid에서 이 기능을 활성화할 수 있습니다.

<c1:FlexGrid>
  <i:Interaction.Behaviors>
      <c1:SkeletonLoadingBehavior />
  </i:Interaction.Behaviors>
</c1:FlexGrid>

FlexGrid에서 WPF 레이아웃 제한을 극복

FlexGrid의 또 한 가지 개선 기능은 매우 큰 오프셋의 셀을 올바로 렌더링하는 것과 관련이 있었습니다.

FlexGrid의 스크롤 성능 문제를 해결하면서, 레이아웃에 큰 수의 요소를 배치하는 것과 관련하여 플랫폼에서 일부 제한을 발견했습니다. 200만 개 이상의 행(행당 30픽셀)을 렌더링할 때 내용이 이동하기 시작하는 것으로 확인되었습니다.

저희는 ScrollViewer와 간단한 TextBlock을 사용하여 이 제한 사항을 재현했습니다. 배치하는 요소의 수가 6,000만 픽셀 또는 200만 개의 행을 초과하면 TextBlock이 잘못 배치됩니다.

따라서 ScrollViewer는 특정 길이 이하의 항목, 최대 약 6,000만 개의 픽셀을 배치하는 데만 유용합니다. 900만 개의 행(2억 7000만 픽셀) 이후에는 텍스트 렌더링이 완전히 중지됩니다. 직접 확인해보고 싶으면 여기에서 샘플을 다운로드하십시오.

이 문제는 FlexGrid 2022 v2에서 해결되었으며 이제 900만 개의 행을 훨씬 넘어서 최대 10억 개의 행을 성공적으로 표시할 수 있습니다. 이론적으로 WPF Datagrid에서 더 많은 행을 표시할 수 있지만 이 데몬의 경우 10억 개에서 중지했습니다.

WPF Edition의 ComponentOne 2022 v2 업데이트를 다운로드하여 새로운 FlexGrid Virtual Mode 샘플을 보고 10억 개의 행을 처리하는 방법을 직접 확인하십시오.

지금 바로 ComponentOne을 다운로드하여 직접 테스트해보세요!

• ComponentOne 공식 홈페이지
• ComponentOne 튜토리얼 및 샘플
• ComponentOne Q&A
• ComponentOne FAQ