Milèstre BV
Sep 13, 2018

Xamarin Forms: Performance matters with Compression and Fast Renderers


Layout Compression as well as Fast Renderers are developed in an attempt to improve the page rendering performance by creating fewer objects in the visual tree of a page.
The performance benefit that this delivers varies depending on the complexity of a page, the version of the operating system being used, and the device on which the application is running. However, the biggest performance gains will be seen on older devices.
We will show both functionality in the products page of a Xamarin Forms app:
Products page

Fast renderer

For now the fast renderer functionality is only available on the Android platform for the controls:
  • Button
  • Image
  • Label
To make use of Fast renderers we have to add the following line in MainActivity.cs, before calling Forms.Init:

Forms.SetFlags("FastRenderers_Experimental");

global::Xamarin.Forms.Forms.Init(this, bundle);

Performance improvements will vary for each application, depending upon the complexity of the layout. In the following two picture we can see how it influences the flattening of the visual tree, using the Hierarchy Viewer.

Products ListView Without using Forms.SetFlags("FastRenderers_Experimental")

Visual tree without fast renderers

Products ListView Without using Forms.SetFlags("FastRenderers_Experimental")

Visual tree with fast renderers

As you can see in the ListView object, each list view item reduced with one level because of fast renderer for Label and Image, being used in each listview item

Frame with Sort and Filter without using Forms.SetFlags("FastRenderers_Experimental")

Frame

Frame with Sort and Filter with using Forms.SetFlags("FastRenderers_Experimental")

Frame with labels and images
Also here a reduction of one level per Label, Image or button.

Layout compression

Layout compression, which is available for iOS as well as Android platforms, aims to flatten the view nesting by removing specified layouts from the visual tree, which can improve page-rendering performance. The performance benefit that's delivered varies depending on the complexity of a page, the version of the operating system being used, and the device on which the application is running. However, the biggest performance gains will be seen on older devices. To enable layout compression set the CompressedLayout.IsHeadless property to True for each layout class.

<StackLayout CompressedLayout.IsHeadless="true">

  ...

</StackLayout>

Note: Since layout compression removes a layout from the visual tree, it's not suitable for layouts that have a visual appearance, or that obtain touch input. Therefore, layouts that set VisualElement properties (such as BackgroundColor, IsVisible, Rotation, Scale, TranslationX and TranslationY or that accept gestures, are not candidates for layout compression.

Without using Layout compression

Products page

Without layout compression

Products page in Hierarchy Viewer

Products page in Hierarchy Viewer without layout compression

Products page in Hierarchy Viewer with layout compression

Products page in Hierarchy Viewer with layout compression As you can see we reduced number of visual objects in the page.