Xamarin.Forms循环更新列表时UI冻结问题原因咨询

我开发了一款通过FTDI从硬件接收数据的软件，以下为模拟实现代码。

XAML代码 #

<StackLayout>
  <ListView ItemsSource="{Binding Items}" IsVisible="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                   <ViewCell>
                        <StackLayout Orientation="Horizontal">
                            <Label Text="{Binding Number}"></Label>
                            <Label Text="{Binding Id}"></Label>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

三次实现尝试 #

第一次实现尝试 #

运行代码后，当条目累计到约2000条时，界面就会出现冻结。

public class Data
{
    public int Id { get; set; }

    public int Number { get; set; }
 }
public class MainViewModel
{
    Thread _background;
    int index = 0;
    public MainViewModel()
    {

        Items = new ObservableCollection<Data>();

        _background = new Thread(AddItems);
        _background.Priority = ThreadPriority.AboveNormal;

        _background.Start();
    }


    public void AddItems()
    {
        while (true)
        {
            List<Data> list = new List<Data>();

            Random r = new Random();

            for (int x = 1; x < 100; x++)
            {
                int value = r.Next();

                Data d = new Data()
                {
                    Id = index++,
                    Number = value
                };

                list.Add(d);
            }

            foreach (Data d in list)
            {
                Device.BeginInvokeOnMainThread(() =>
                {
                    Items.Insert(0, d);
                });
            }
        }

    }

    public ObservableCollection<Data> Items
    {
        get;
        set;
    }
}

第二次实现尝试 #

改为单次调用BeginInvokeOnMainThread，效果有所提升，列表会间歇性更新，但更新速度会越来越快。

public class MainViewModel : INotifyPropertyChanged
{
    Thread _background;
    int index = 0;
    public MainViewModel()
    {

        Items = new ObservableCollection<Data>();

        _background = new Thread(AddItems);
        _background.Priority = ThreadPriority.AboveNormal;

        _background.Start();
    }

    protected void OnPropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if (handler != null)
            handler(this, new PropertyChangedEventArgs(propertyName));
    }
    public void AddItems()
    {
        while (true)
        {
            ObservableCollection<Data> list = new ObservableCollection<Data>();

            Random r = new Random();

            for (int x = 1; x < 100; x++)
            {
                int value = r.Next();

                Data d = new Data()
                {
                    Id = index++,
                    Number = value
                };

                list.Add(d);
            }


            var temp = new ObservableCollection<Data>(Items);

            foreach (Data d in list)
            {
                temp.Insert(0, d);
            }

            Device.BeginInvokeOnMainThread(() =>
            {
                Items = temp;
            });

        }

    }

    private ObservableCollection<Data> _items;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Data> Items
    {
        get
        {
            return _items;
        }
        set
        {
            _items = value;
            OnPropertyChanged(nameof(Items));
        }
    }
}

第三次实现尝试 #

添加Thread.Sleep(50);逻辑，效果最好，基本可满足使用需求。

public class MainViewModel : INotifyPropertyChanged
{
    Thread _background;
    int index = 0;
    public MainViewModel()
    {

        Items = new ObservableCollection<Data>();

        _background = new Thread(AddItems);
        _background.Priority = ThreadPriority.AboveNormal;

        _background.Start();
    }

    protected void OnPropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if (handler != null)
            handler(this, new PropertyChangedEventArgs(propertyName));
    }
    public void AddItems()
    {
        while (true)
        {
            ObservableCollection<Data> list = new ObservableCollection<Data>();

            Random r = new Random();

            for (int x = 1; x < 100; x++)
            {
                int value = r.Next();

                Data d = new Data()
                {
                    Id = index++,
                    Number = value
                };

                list.Add(d);
            }

            Thread.Sleep(50);

            var temp = new ObservableCollection<Data>(Items);

            foreach (Data d in list)
            {
                temp.Insert(0, d);
            }

            Device.BeginInvokeOnMainThread(() =>
            {
                Items = temp;
            });

        }

    }

    private ObservableCollection<Data> _items;

    public event PropertyChangedEventHandler PropertyChanged;

    public ObservableCollection<Data> Items
    {
        get
        {
            return _items;
        }
        set
        {
            _items = value;
            OnPropertyChanged(nameof(Items));
        }
    }
}

核心疑问 #

猜测问题和BeginInvokeOnMainThread有关，UI线程承载了过多工作，需要明确界面冻结的根本原因，以及添加Thread.Sleep能够解决问题的具体原理。

界面冻结的核心原因是UI线程消息队列积压，没有空闲资源处理渲染、用户交互任务，三次实现的问题可以逐个拆解：

1. 第一次实现的性能问题

• 后台线程是无限速死循环，每生成100条数据就向UI线程抛100个独立委托，每个委托执行一次Items.Insert(0)。ObservableCollection每次插入都会触发CollectionChanged事件，ListView收到事件后要重新计算布局、重绘可视区域。往集合头部插入的时间复杂度是O(n)，数据量到2000条时，单次插入的开销已经很高，连续100次插入会触发100次重绘，直接把UI线程占满。
• 后台线程优先级被设为AboveNormal，生产UI任务的速度远高于UI线程的消费速度，待执行的委托在消息队列里不断积压，UI线程根本抽不出时间处理触摸事件、系统渲染信号，直接表现为界面冻结。

2. 第二次实现的性能问题

• 虽然把100次插入合并成了一次替换ItemsSource的操作，减少了重绘次数，但后台线程依然没有限流。每次循环都要完整复制一遍现有集合生成temp对象，数据量越大，复制、插入的开销越高，生产UI任务的速度还是比UI线程处理速度快。
• 你看到的“更新速度越来越快”本质是延迟越来越高：UI线程一直在处理积压的历史更新任务，新的更新还在不断往队列里塞，队列长度持续增长，界面表现就是卡顿、跳变。

3. Thread.Sleep(50)生效的原理

• 本质是给后台线程加了限流，把UI更新的最高频率限制在20次/秒，这个频率刚好匹配UI线程的处理能力：50ms的间隔足够UI线程完成一次集合替换、ListView布局计算、界面重绘的全流程，不会出现任务积压。
• 同时固定间隔给UI线程留足了空闲时间片，用来处理用户滑动、点击操作，响应系统的渲染帧信号，所以界面不会冻住。

更优的优化方向 #

Thread.Sleep只是简单可用的临时方案，要支持更大数据量、更流畅的体验可以做这些调整：

• 不要每次替换整个ObservableCollection，后台攒够一批数据后只抛一次委托到UI线程，在单次委托里批量往现有集合插入数据，避免全量集合复制的开销。
• 确保开启ListView的虚拟化（默认是开启的，不要自定义破坏虚拟化的布局），虚拟化模式下列表只渲染可视区域的单元格，哪怕总数据量到十万级也不会卡顿。
• 替换无限速死循环为生产者消费者模式：硬件收到的数据先存入并发队列，UI线程按照固定刷新率（比如10-15次/秒）批量从队列取数据更新，既不会丢数据，也不会压垮UI线程。
• 不要把后台工作线程优先级设为AboveNormal，优先级高于UI线程会抢CPU时间片，反而加剧卡顿。

内容的提问来源于stack exchange，提问作者Tomer Dror