Blazor 그리드 가상화 및 성능

    Ignite UI for Blazor에서 IgbGrid 컨트롤은 콘텐츠를 수직 및 수평으로 모두 가상화합니다.

    Blazor Grid Virtualization and Performance Example

    Enabling Virtualization

    이제 IgbGrid 뷰 포트에 현재 표시되는 것만 렌더링하고 사용자가 데이터를 가로/세로 스크롤하는 동안 표시된 데이터를 교환하여 DOM 렌더링 및 메모리 소비를 최적화합니다. IgbGrid의 Width 및 Height 기본적으로 100%로 설정되어 표시되는 콘텐츠가 사용 가능한 공간에 맞지 않고 스크롤 막대가 수직 또는 수평으로 필요한 경우 가상화를 활성화합니다.

    그러나 IgbGrid의 Width 및/또는 Height​ ​null로 명시적으로 설정할 수도 있습니다. 즉, 관련 치수가 내부 항목의 전체 크기에 따라 결정됩니다. 그러면 스크롤 막대가 표시되지 않고 모든 항목이 해당 차원(Width가 null 인 경우 열, Height가 null 인 경우 행)을 따라 렌더링됩니다.

    데이터 청크의 크기는 다음에 의해 결정됩니다.

    • 수직(행) 가상화의 행 높이입니다. 이는 RowHeight 옵션에 의해 결정되며 기본적으로 50(px)입니다.
    • 수평(열) 가상화에 대한 개별 열 너비(픽셀)입니다. 이는 각 열 구성 요소에 대해 명시적인 너비를 설정하거나 명시적인 너비가 설정되지 않은 모든 열에 적용되는 IgbGrid의 ColumnWidth 옵션을 설정하여 결정할 수 있습니다.

    대부분의 경우 치수를 설정하지 않은 채로 그리드에 기본 동작을 적용하면 원하는 레이아웃이 생성됩니다. 열 너비의 경우 열 개수, 너비가 설정된 열 및 IgbGrid 컨테이너의 계산된 너비에 따라 결정됩니다. 그리드는 할당하려는 너비가 136(px) 미만이 아닌 한 사용 가능한 공간 내에 모든 열을 맞추려고 시도합니다. 이 경우 너비가 지정되지 않은 열에는 최소 너비인 136(px)이 적용되고 가로 스크롤 막대가 표시됩니다. 그리드는 수평으로 가상화됩니다.

    열 너비를 백분율(%)로 명시적으로 설정하면 대부분의 경우 수평 스크롤 막대가 없기 때문에 수평으로 가상화되지 않는 그리드가 생성됩니다.

    Virtualization Limitations

    • Mac OS에서는 "스크롤할 때만 스크롤 막대 표시" 시스템 옵션이 true(기본값)로 설정된 경우 가로 스크롤 막대가 표시되지 않습니다. 이는 IgbGrid의 행 컨테이너에 숨김으로 설정된 오버플로가 있기 때문입니다. 옵션을 "항상"으로 변경하면 스크롤바가 나타납니다.

    FAQ

    Why is having dimensions in the Grid is necessary for virtualization to work?

    렌더링하기 전에 컨테이너 및 항목의 크기에 대한 정보가 없으면 스크롤 막대의 너비 또는 높이를 설정하거나 IgbGrid에서 임의의 위치로 스크롤할 때 뷰에 있어야 할 항목을 결정하는 것은 잘못된 것입니다. 실제 크기에 대한 가정은 스크롤 막대의 부자연스러운 동작으로 이어질 수 있으며 궁극적으로 최종 사용자에게 최적이 아닌 경험을 제공할 수 있습니다. 이것이 가상화를 적용하기 위해 관련 차원 설정이 강제되는 이유입니다.

    API References

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.