Microsoft MVP성태의 닷넷 이야기
글쓴 사람
정성태 (techsharer at outlook.com)
홈페이지
첨부 파일

WPF DataGrid의 데이터 바인딩 시 리플렉션의 부하는 어느 정도일까요?

최근에 아래와 같은 질문이 있었는데요.

컬럼이 많은 데이터그리드에서 정렬 할 때 속도가 느립니다.
; https://www.sysnet.pe.kr/3/0/3608
; https://www.sysnet.pe.kr/3/0/3609
; https://www.sysnet.pe.kr/3/0/3610

WPF의 경우 DataGrid에 바인딩된 요소를 접근하는 과정에 리플렉션을 사용하게 됩니다. (범용적인 데이터 바인딩이니 이는 어쩔 수 없는 부분입니다.) 이를 확인하는 방법은 해당 속성을 접근하는 get 코드에 BP를 걸고 Call Stack을 보면 됩니다.

datagrid_strong_type_access_1.png

모든 값을 리플렉션으로 접근하는 것은 느릴 수 있을텐데, 과연 얼마나 느릴까요? ^^ 궁금해졌습니다.

테스트를 쉽게 하기 위해 "컬럼이 많은 데이터그리드에서 정렬 할 때 속도가 느립니다." 글에 포함된 예제를 변형했는데요. 우선, xaml은 다음과 같이 구성하고,

<Window x:Class="DataGridTestProj.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DataGridTestProj"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Click="Button_Click" />
        <DataGrid x:Name="dg" Grid.Row="1" AutoGenerateColumns="False" IsReadOnly="True"
                  VirtualizingPanel.IsVirtualizing="True" VirtualizingPanel.VirtualizationMode="Recycling"
                  EnableColumnVirtualization="True" EnableRowVirtualization="True">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Text1"  Binding="{Binding Text1}" Width="150"/>
                ...[2~32까지 생략]...
                <DataGridTextColumn Header="Text33" Binding="{Binding Text33}" Width="150"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

xaml.cs는 Button_Click 시 정렬하는 코드와 렌더링 부하 측정 코드를 추가했습니다.

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Windows;
using System.Windows.Threading;

namespace DataGridTestProj
{
    public partial class MainWindow : Window
    {
        List<Item> list;
        bool reverse = false;

        public MainWindow()
        {
            InitializeComponent();

            list = MakeList();
            dg.ItemsSource = list;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            reverse = !reverse;

            dg.ItemsSource = null;

            list.Sort((e1, e2) => e1.Text1.CompareTo(e2.Text1) * ((reverse == true) ? 1 : -1));

            dg.ItemsSource = list;

            Stopwatch st = new Stopwatch();
            st.Start();
            Dispatcher.BeginInvoke(DispatcherPriority.Loaded, new Action<object>(CheckTime), st);
        }

        private void CheckTime(object value)
        {
            Stopwatch st = value as Stopwatch;
            st.Stop();

            System.Diagnostics.Trace.WriteLine("DataGrid.RenderTime: " + st.ElapsedMilliseconds);
        }

        public List<Item> MakeList()
        {
            Random rnd = new Random();

            List<Item> list = new List<Item>();

            for (int i = 0; i < 1133; i++)
            {
                list.Add(
                    new Item(
                    rnd.Next(1, 13232323).ToString(),
                    // ...[생략]...
                    rnd.Next(1, 13232323).ToString()
                    )
                );
            }

            return list;
        }
    }
}

public class Item
{
    public Item(String Text1 = "", 
                //...[생략]... 
                String Text33 = "")
    {
        this.Text1 = Text1;
        //...[생략]...
        this.Text33 = Text33;
    }

    public String Text1 { get; set; }
    //...[생략]...
    public String Text33 { get; set; }
}

이렇게 하고 윈도우를 최대화시켜 테스트 해보면, 제 컴퓨터에서 Button을 누를 때 마다 Output 창에 다음과 같은 결과를 볼 수 있었습니다.

DataGrid.RenderTime: 365
DataGrid.RenderTime: 356
DataGrid.RenderTime: 365
DataGrid.RenderTime: 369
DataGrid.RenderTime: 340

이제 같은 예제를 리플렉션이 아닌 strong 타입으로 접근하도록 바꿔야 하는데요. 이것이 가능하려면 DataGrid의 Columns에 정의된 DataGridTextColumn을 사용자 정의 타입으로 바꿔야 합니다.

<Window x:Class="DataGridTestProj.MainWindow"
        xmlns:local="clr-namespace:DataGridTestProj"
        ...[생략]...>
    <Grid>
        ...[생략]...
        <DataGrid x:Name="dg" ...[생략]...>
            
            <DataGrid.Columns>
                <local:myDataGridTextColumn Header="Text1" Field="Text1"  Width="150"/>
                ...[생략]...
                <local:myDataGridTextColumn Header="Text33" Field="Text33"     Width="150"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

당연히 myDataGridTextColumn 클래스를 구현해야겠지요. ^^

public class myDataGridTextColumn : DataGridTextColumn
{
    public static readonly DependencyProperty FieldProperty =
            DependencyProperty.Register("Field", typeof(string),
            typeof(myDataGridTextColumn), new FrameworkPropertyMetadata(null));

    public string Field
    {
        get { return (string)GetValue(FieldProperty); }
        set { SetValue(FieldProperty, value); }
    }

    protected override FrameworkElement GenerateElement(DataGridCell cell, object dataItem)
    {
        FrameworkElement fe = base.GenerateElement(cell, dataItem);

        TextBlock tb = fe as TextBlock;

        string fieldValue = null;
        Item item = (dataItem as Item);
        switch (Field)
        {
            case "Text1":
                fieldValue = item.Text1;
                break;

            // ...[case 문 생략]....

            case "Text33":
                fieldValue = item.Text33;
                break;
        }

        tb.Text = fieldValue;

        return fe;
    }
}

GenerateElement 메서드를 재정의해 object로 넘어온 Item 타입 인스턴스의 내부 필드를 리플렉션이 아닌 직접 접근하는 방식으로 바꿀 수 있습니다. 이렇게 하고 실행했더니... Button을 누를 때마다 다음과 같은 결과를 보였습니다.

DataGrid.RenderTime: 339
DataGrid.RenderTime: 310
DataGrid.RenderTime: 332
DataGrid.RenderTime: 309
DataGrid.RenderTime: 316

350ms 대에서 310ms 수준으로 떨어졌는데 미세하게 빨라졌다는 느낌을 받게 됩니다. 그렇지만, 예상과는 달리 리플렉션이 과히 무거운 수준은 아님을 알 수 있습니다. 사실, 리플렉션을 사용해도 MethodInfo에 대한 cache나 LCG(Lightweight Code Generator)같은 것을 곁들이면 일반 메서드 호출과 거의 차이가 없기 때문에 마이크로소프트에서 최적화를 잘 했던 것으로 보입니다.




그럼 과연, 어디서 렌더링 타임이 잡아먹는 걸까요?

이런 경우, 의심할만한 요소라면 MeasureOverride, LayoutOverride 정도가 될 것입니다. 이를 확인하기 위해 DataGrid 내의 VirtualizingStackPanel을 교체해 볼 수 있습니다.

<DataGrid x:Name="itemGridView" Grid.Row="1" ItemsSource="{Binding list}" AutoGenerateColumns="False" 
                    VirtualizingPanel.IsVirtualizing="True"
                    VirtualizingPanel.VirtualizationMode="Recycling"
            >
    <DataGrid.ItemsPanel>
        <ItemsPanelTemplate>
            <local:myVirtualizingStackPanel />
        </ItemsPanelTemplate>
    </DataGrid.ItemsPanel>

    ...[생략]...
</DataGrid>

public class myVirtualizingStackPanel : VirtualizingStackPanel
{
    protected override Size MeasureOverride(Size availableSize)
    {
        Stopwatch st = new Stopwatch();
        st.Start();
        Size size = base.MeasureOverride(availableSize);
        st.Stop();

        System.Diagnostics.Trace.WriteLine("myVirtualizingStackPanel.MeasureOverride: " + st.ElapsedMilliseconds);
        return size;
    }

    protected override Size ArrangeOverride(Size arrangeBounds)
    {
        Stopwatch st = new Stopwatch();
        st.Start();
        Size size = base.ArrangeOverride(arrangeBounds);
        st.Stop();

        System.Diagnostics.Trace.WriteLine("myVirtualizingStackPanel.ArrangeOverride: " + st.ElapsedMilliseconds);
        return size;
    }
}

이렇게 교체하고 실행한 결과는 다음과 같습니다.

myVirtualizingStackPanel.MeasureOverride: 427
myVirtualizingStackPanel.ArrangeOverride: 164
DataGrid.RenderTime: 660

427 + 164 == 591이니까 DataGrid의 전체 렌더링 시간의 주요 부하로 보입니다. 그런데, 이상하군요. 왜 300 수준에서 600 수준으로 늘어난 것일까요? 그것은 DataGrid 스스로 내부 VirtualizingStackPanel을 사용하면서 EnableColumnVirtualization, EnableRowVirtualization 속성을 통해 Column과 Row에까지 가상화를 하는 최적화를 수행하지만, 사용자가 설정한 VirtualizingStackPanel에는 이 역할을 수행하지 않기 때문입니다. 즉, 이전에는 나름대로의 최적화를 좀 더 수행할 수 있었던 것입니다. (참고로, 사용자 정의 VirtualizingStackPanel을 지정한 상태에서 EnableColumnVirtualization, EnableRowVirtualization 속성을 True로 설정하면 UI가 엉망으로 나옵니다. 이거 정상으로 나오게 하는 방법이 있을까요? ^^)




결론을 내리면, 행/열이 많은 DataGrid의 렌더링을 최적화하려면 내부 StackPanel에 대한 MeasureOverride, ArrangeOverride를 개선한 사용자 정의 패널을 만들어야 합니다. 가령, 행/열의 변화가 없다면 별도로 Measure/Arrange 작업을 할 필요없이 곧바로 현재 보유중인 FrameworkElement의 텍스트만 교체하는 코드가 동작하도록 해야겠지요. 아마 작업이 쉽진 않을 것입니다.

DataGrid를 꼭 써야 하는 것이 아니라면, 이런 경우 차라리 ListView를 선택하는 것이 더 좋은 방법일 수 있습니다.

<ListView Name="dg" Grid.Row="1" VirtualizingPanel.IsVirtualizing="True" VirtualizingPanel.VirtualizationMode="Recycling">
    <ListView.View>
        <GridView>
            <GridViewColumn  Header="Text1"  DisplayMemberBinding="{Binding Text1}" Width="150"/>
            ...[생략]...
        </GridView>
    </ListView.View>
</ListView>

그럼, 리플렉션을 이용한 속성 접근임에도 불구하고 280대로 렌더링 시간이 내려가서 체감상 거의 느리다는 느낌이 들지 않습니다.

ListView.RenderTime: 286
ListView.RenderTime: 290
ListView.RenderTime: 287
ListView.RenderTime: 296
ListView.RenderTime: 284

물론, DataGrid에서 기본 제공하는 header를 눌러 정렬하는 기능이 제공되지 않지만 이것은 다음의 글을 보고 구현해 주면 됩니다.

How-to: ListView with column sorting
; http://www.wpf-tutorial.com/listview-control/listview-how-to-column-sorting/

(첨부한 파일은 위의 예제 코드를 포함합니다.)




[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]

[연관 글]


donaricano-btn



[최초 등록일: ]
[최종 수정일: 7/10/2021]

Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.
by SeongTae Jeong, mailto:techsharer at outlook.com

비밀번호

댓글 쓴 사람
 




[1]  2  3  4  5  6  7  8  9  10  11  12  13  14  15  ...
NoWriterDateCnt.TitleFile(s)
12941정성태1/26/202239오류 유형: 790. AKS/k8s - pod 상태가 Pending으로 지속되는 경우
12940정성태1/26/202233오류 유형: 789. AKS에서 hpa에 따른 autoscale 기능이 동작하지 않는다면?
12939정성태1/25/202230.NET Framework: 1140. C# - ffmpeg(FFmpeg.AutoGen)를 이용해 MP3 오디오 파일 인코딩/디코딩하는 예제파일 다운로드1
12938정성태1/24/202261개발 환경 구성: 633. Docker Desktop + k8s 환경에서 local 이미지를 사용하는 방법
12937정성태1/24/202250.NET Framework: 1139. C# - ffmpeg(FFmpeg.AutoGen)를 이용해 오디오(mp2) 인코딩하는 예제(encode_audio.c)파일 다운로드1
12936정성태1/22/202242.NET Framework: 1138. C# - ffmpeg(FFmpeg.AutoGen)를 이용해 멀티미디어 파일의 메타데이터를 보여주는 예제(metadata.c)파일 다운로드1
12935정성태1/22/202255.NET Framework: 1137. ffmpeg의 파일 해시 예제(ffhash.c)를 C#으로 포팅파일 다운로드1
12934정성태1/22/202221오류 유형: 788. Warning C6262 Function uses '65564' bytes of stack: exceeds /analyze:stacksize '16384'. Consider moving some data to heap.
12933정성태1/21/202238.NET Framework: 1136. C# - ffmpeg(FFmpeg.AutoGen)를 이용해 MP2 오디오 파일 디코딩 예제(decode_audio.c)파일 다운로드1
12932정성태1/20/2022106.NET Framework: 1135. C# - ffmpeg(FFmpeg.AutoGen)로 하드웨어 가속기를 이용한 비디오 디코딩 예제(hw_decode.c) [2]파일 다운로드1
12931정성태1/20/2022140개발 환경 구성: 632. ASP.NET Core 프로젝트를 AKS/k8s에 올리는 과정
12930정성태1/19/202247개발 환경 구성: 631. AKS/k8s의 Volume에 파일 복사하는 방법
12929정성태1/19/202287개발 환경 구성: 630. AKS/k8s의 Pod에 Volume 연결하는 방법
12928정성태1/18/202284개발 환경 구성: 629. AKS/Kubernetes에서 호스팅 중인 pod에 shell(/bin/bash)로 진입하는 방법
12927정성태1/18/202295개발 환경 구성: 628. AKS 환경에 응용 프로그램 배포 방법
12926정성태1/17/202274오류 유형: 787. AKS - pod 배포 시 ErrImagePull/ImagePullBackOff 오류
12925정성태1/17/2022107개발 환경 구성: 627. AKS의 준비 단계 - ACR(Azure Container Registry)에 docker 이미지 배포
12924정성태1/15/2022209.NET Framework: 1134. C# - ffmpeg(FFmpeg.AutoGen)를 이용한 비디오 디코딩 예제(decode_video.c) [2]파일 다운로드1
12923정성태1/15/2022101개발 환경 구성: 626. ffmpeg.exe를 사용해 비디오 파일을 MPEG1 포맷으로 변경하는 방법
12922정성태1/14/2022154개발 환경 구성: 625. AKS - Azure Kubernetes Service 생성 및 SLO/SLA 변경 방법
12921정성태1/14/202267개발 환경 구성: 624. Docker Desktop에서 별도 서버에 설치한 docker registry에 이미지 올리는 방법
12920정성태1/14/202230오류 유형: 786. Camtasia - An error occurred with the camera: Failed to Add Video Sampler.
12919정성태1/13/202289Windows: 199. Host Network Service (HNS)에 의해서 점유되는 포트
12918정성태1/13/2022104Linux: 47. WSL - shell script에서 설정한 환경 변수가 스크립트 실행 후 반영되지 않는 문제
12917정성태1/12/202280오류 유형: 785. C# - The type or namespace name '...' could not be found (are you missing a using directive or an assembly reference?)
[1]  2  3  4  5  6  7  8  9  10  11  12  13  14  15  ...