布局压缩Layout Compression

下载示例下载示例Download Sample Download the sample

布局压缩从可视化树中删除指定的布局,以试图提升页面呈现性能。本文介绍如何启用布局压缩和可以带来的好处。Layout compression removes specified layouts from the visual tree in an attempt to improve page rendering performance. This article explains how to enable layout compression and the benefits it can bring.

概述Overview

Xamarin.Forms 执行使用递归方法调用的两个序列的布局:Xamarin.Forms performs layout using two series of recursive method calls:

  • 在页上,使用的可视化树的顶部开始布局,并将经历的可视化树,以包含每个可视元素在页面上的所有分支。Layout begins at the top of the visual tree with a page, and it proceeds through all branches of the visual tree to encompass every visual element on a page. 其他元素的父元素负责大小和位置相对于本身及其子级。Elements that are parents to other elements are responsible for sizing and positioning their children relative to themselves.
  • 失效是依据中的元素在页面上的更改将触发新的布局循环过程。Invalidation is the process by which a change in an element on a page triggers a new layout cycle. 当他们不再具有正确的大小或位置时,元素将被视为无效。Elements are considered invalid when they no longer have the correct size or position. 当它的一个子级发生更改时大小,具有子级的可视化树中的每个元素是向你发出警报。Every element in the visual tree that has children is alerted whenever one of its children changes sizes. 因此,在可视化树中的元素大小的更改可能导致 ripple 上一级树的更改。Therefore, a change in the size of an element in the visual tree can cause changes that ripple up the tree.

有关 Xamarin.Forms 布局的执行方式的详细信息,请参阅创建自定义布局For more information about how Xamarin.Forms performs layout, see Creating a Custom Layout.

布局过程的结果是层次结构的本机控件。The result of the layout process is a hierarchy of native controls. 但是,此层次结构包含其他容器呈现器和包装对于平台呈现器,进一步以下嵌套的视图层次结构。However, this hierarchy includes additional container renderers and wrappers for platform renderers, further inflating the view hierarchy nesting. 嵌套级别越高,Xamarin.Forms 具有执行,以显示页的工作的值就越大。The deeper the level of nesting, the greater the amount of work that Xamarin.Forms has to perform to display a page. 对于复杂的布局的视图层次结构可以是嵌套的深度和广泛,具有多个级别。For complex layouts, the view hierarchy can be both deep and broad, with multiple levels of nesting.

有关示例,请登录到 Facebook 的示例应用程序中的以下按钮:For example, consider the following button from the sample application for logging into Facebook:

此按钮指定为以下 XAML 视图层次结构的自定义控件:This button is specified as a custom control with the following XAML view hierarchy:

<ContentView ...>
    <StackLayout>
        <StackLayout ...>
            <AbsoluteLayout ...>
                <Button ... />    
                <Image ... />
                <Image ... />
                <BoxView ... />
                <Label ... />
                <Button ... />
            </AbsoluteLayout>
        </StackLayout>
        <Label ... />
    </StackLayout>    
</ContentView>

可以检查生成的嵌套的视图层次结构,与Xamarin InspectorThe resulting nested view hierarchy can be examined with Xamarin Inspector. 在 Android 上,嵌套的视图层次结构包含 17 视图:On Android, the nested view hierarchy contains 17 views:

布局压缩,这是适用于 iOS 和 Android 平台上的 Xamarin.Forms 应用程序,旨在来平展嵌套方法从可以提高页面呈现性能的可视化树中删除指定的布局的视图。Layout compression, which is available for Xamarin.Forms applications on the iOS and 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.

备注

虽然这篇文章重点介绍在 Android 上应用布局压缩的结果,但这同样适用于 iOS。While this article focuses on the results of applying layout compression on Android, it's equally applicable to iOS.

布局压缩Layout Compression

在 XAML 中,可以通过设置启用布局压缩CompressedLayout.IsHeadless附加属性设置为true布局类上:In XAML, layout compression can be enabled by setting the CompressedLayout.IsHeadless attached property to true on a layout class:

<StackLayout CompressedLayout.IsHeadless="true">
  ...
</StackLayout>   

或者,它可以启用在 C# 中的第一个参数为指定的布局实例CompressedLayout.SetIsHeadless方法:Alternatively, it can be enabled in C# by specifying the layout instance as the first argument to the CompressedLayout.SetIsHeadless method:

CompressedLayout.SetIsHeadless(stackLayout, true);

重要

布局压缩从可视化树中删除一个布局,因为它不适合布局提供的可视外观,或获取触控输入。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. 因此,该设置的布局 VisualElement 属性 (如 BackgroundColor IsVisible Rotation Scale TranslationX TranslationY 或的接受手势,不适合布局压缩。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. 但是,启用布局压缩布局的设置可视外观的属性,或接受手势,不会导致生成或运行时错误。However, enabling layout compression on a layout that sets visual appearance properties, or that accepts gestures, will not result in a build or runtime error. 相反,将应用布局压缩和可视外观属性和手势识别将以静默方式失败。Instead, layout compression will be applied and visual appearance properties, and gesture recognition, will silently fail.

对于 Facebook 按钮,可以在三个布局类上启用布局压缩:For the Facebook button, layout compression can be enabled on the three layout classes:

<StackLayout CompressedLayout.IsHeadless="true">
    <StackLayout CompressedLayout.IsHeadless="true" ...>
        <AbsoluteLayout CompressedLayout.IsHeadless="true" ...>
            ...
        </AbsoluteLayout>
    </StackLayout>
    ...
</StackLayout>  

在 Android 上,这会导致 14 视图的嵌套的视图层次结构:On Android, this results in a nested view hierarchy of 14 views:

与原始的嵌套的视图层次结构的 17 视图相比,这表示 17%的次数减少。Compared to the original nested view hierarchy of 17 views, this represents a reduction in the number of views of 17%. 虽然这种减少可能出现不重要,减少对整个页面的视图可以更重要。While this reduction may appear insignificant, the view reduction over an entire page can be more significant.

快速呈现器Fast Renderers

快速呈现器减少的通货膨胀和呈现成本 Android 上 Xamarin.Forms 控件通过平展生成的本机视图层次结构。Fast renderers reduce the inflation and rendering costs of Xamarin.Forms controls on Android by flattening the resulting native view hierarchy. 通过创建更少的对象,这反过来会导致不太复杂的可视化树和内存使用率,这进一步提高性能。This further improves performance by creating fewer objects, which in turn results in a less complex visual tree and less memory use. 有关快速呈现器的详细信息,请参阅快速呈现器For more information about fast renderers, see Fast Renderers.

示例应用程序中的 Facebook 按钮,结合使用布局压缩和快速呈现器生成 8 视图的嵌套的视图层次的结构:For the Facebook button in the sample application, combining layout compression and fast renderers produces a nested view hierarchy of 8 views:

与原始的嵌套的视图层次结构的 17 视图相比,这表示减少了 52%。Compared to the original nested view hierarchy of 17 views, this represents a reduction of 52%.

示例应用程序包含从实际的应用程序中提取的页。The sample application contains a page extracted from a real application. 如果没有布局压缩和快速呈现器,页面将生成 130 视图在 Android 上的嵌套的视图层次结构。Without layout compression and fast renderers, the page produces a nested view hierarchy of 130 views on Android. 启用快速呈现器和适当的布局类上的布局压缩到 70 视图,降低了 46%的减少的嵌套的视图层次结构。Enabling fast renderers and layout compression on appropriate layout classes reduces the nested view hierarchy to 70 views, a reduction of 46%.

总结Summary

布局压缩从可视化树中删除指定的布局,以试图提升页面呈现性能。Layout compression removes specified layouts from the visual tree in an attempt to improve page rendering performance. 这带来的性能优势因页面复杂性、要使用的操作系统版本以及运行应用的设备而异。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.