0

The problem is that the first call to a page's InitializeComponent is very slow. Thus the page transition animation is laggy for the first time. StackLayout with a few Labels and a Grid can take like 70 ms on my phone. I removed almost everything from the page and tried to find a bottle neck but it seems that even an empty grid adds a significant amount of time. So my full page takes something like 180 ms and when it's loaded for the first time there is almost no animation and it looks like a freezing app. Consecutive animations take like 15~20 ms.

Answering your potential questions: Yes, I have XAML compilation enabled. And yes, I've tried Release build but it doesn't help much.

Updated

I have added a button and a static grid to an items detail of default Xamarin application created in Visual Studio.

This is current content of the page:

<StackLayout Spacing="20" Padding="15">
    <Label Text="Text:" FontSize="Medium" />
    <Label Text="{Binding Text}" FontSize="Small"/>
    <Label Text="Description:" FontSize="Medium" />
    <Label Text="{Binding Description}" FontSize="Small"/>
    <Button Text="{Binding Text}" />

    <Grid RowSpacing="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Label Grid.Row="0" Grid.Column="0" Text="Coins:" FontAttributes="Bold" />
        <Label Grid.Row="0" Grid.Column="1" Text="111" HorizontalTextAlignment="End" />

        <Label Grid.Row="0" Grid.Column="2" Text="Total coins:" FontAttributes="Bold" />
        <Label Grid.Row="0" Grid.Column="3" Text="100000" HorizontalTextAlignment="End"/>

        <Label Grid.Row="1" Grid.Column="0" Text="Gold:" FontAttributes="Bold" />
        <Label Grid.Row="1" Grid.Column="1" Text="222" HorizontalTextAlignment="End" />

        <Label Grid.Row="1" Grid.Column="2" Text="Table gold:" FontAttributes="Bold" />
        <Label Grid.Row="1" Grid.Column="3" Text="120 " HorizontalTextAlignment="End"/>
    </Grid>
</StackLayout>

And this is how I measure the time:

public partial class ItemDetailPage : ContentPage
{
    public ItemDetailPage()
    {
        var start = DateTime.Now.ToUniversalTime().Millisecond;
        InitializeComponent();
        var end = DateTime.Now.ToUniversalTime().Millisecond;
        Debug.WriteLine($"ItemDetailPage.InitializeComponent: {end - start}");
        BindingContext = new ItemDetailViewModel();
    }
}
user2146414
  • 840
  • 11
  • 29
  • 2
    Please include a [mre]. – Connor Low Nov 02 '21 at 17:13
  • @ConnorLow Thanks for a hint. I've added some code to demonstrate the issue. On my phone the first page transition is super laggy and initialisation takes 70 ms. – user2146414 Nov 02 '21 at 17:47
  • 1
    What device are you testing with? Have you tried other devices? What version of Xamarin are you compiling with? What platform OS version are you targeting? – Andrew H Nov 02 '21 at 19:31
  • @AndrewH Thanks for the questions. I use Samsun A40 with Android 11. Target API 30 (Android 11). Version: 11.3.0.4 (Visual Studio Community). I've tried on Xaomi mi 11 Lite and it runs significantly faster. But still there is a big gap between first and next page loads (e.g. 30 vs 7). Is it possible to reduce it? For the first time components are loaded and cached? – user2146414 Nov 02 '21 at 21:53
  • 1
    1) *"... Release build ..."*. Even with Release build, Be sure to do "Start without debugging", not "Start debugging". Or once you've downloaded to device, start it from its icon on the phone's home page. Not having a debugger attached is the biggest performance boost. 2) VS Enterprise has Android compilation options that VS Community lacks. In fact, that is the sole reason I pay for an Azure account which includes Enterprise. – ToolmakerSteve Nov 03 '21 at 01:21
  • 1
    3) The time in constructor isn't the biggest lag. But I'll start with that: earlier in your app, on a background thread, do `var dummy = new ItemDetailPage();`. (Even better if you store it somewhere, and use later. Avoiding an extra constructor call. But that's an advanced topic.) Now you've run constructor once. But I predict that will not help much. 4) that "frozen animation" is the bigger problem. That's due to how long it takes to "measure and layout" the page. Unfortunately this is hard to avoid. See (2) in my previous comment - that's what I ended up doing, for Android. :( – ToolmakerSteve Nov 03 '21 at 01:40
  • @ToolmakerSteve My intuition was telling me it might be all about "measure and layout" and you've confirmed that. I hoped that I was doing something wrong. But I'm a little disappointed because I didn't experience almost any lags during pages transitions using ionic (that is hybrid engine using web view). I've tried the trick with in advance construction and didn't help. So basically there is no way to "measure and layout" in advance? – user2146414 Nov 03 '21 at 08:56
  • Unfortunately, you will need to wait until MAUI is released. To confirm this, I've raised [this issue against XF](https://github.com/xamarin/Xamarin.Forms/issues/14826). Note tht it has been closed, but devs are aware of the major "pain point" here. – ToolmakerSteve Nov 03 '21 at 20:51
  • 1
    @ToolmakerSteve Thanks a lot for your explanation and engagement! At least I know it's not my fault and can move on and focus on other things in my app. And definitely I'm going to try MAUI. – user2146414 Nov 03 '21 at 22:34

0 Answers0