performance - iPad 上的 Adob​​e AIR 滚动性能 (2) - 我能期待什么？

Question

我目前正在开发一个以 iPad2 作为硬件平台的 Adob​​e AIR 应用程序，无法在其中一个屏幕上获得良好的滚动性能。我正在使用一个 Spark 列表，带有一个自定义项目渲染器，如下所示:

<s:List id="productList" top="116" bottom="0" left="10" right="10" 
    width="100%"
    visible="true" includeInLayout="true"
    height="0"
    maxHeight="500"
    opaqueBackground="#ffffff"
    itemRenderer="myRenderer">
</s:List>

最初，我使用的是 .mxml 渲染器，但在看到令人讨厌的性能后，我决定推出自己的渲染器，扩展 UIComponent(我省略了包和大括号以节省水平空间):

import mx.controls.listClasses.IListItemRenderer;
import mx.core.UIComponent;
import mx.events.FlexEvent;
import mx.utils.ColorUtil;

import spark.components.Label;
import spark.components.TextInput;

public final class OrderViewProductLineTestIR extends UIComponent implements IListItemRenderer 
{
    public function OrderViewProductLineTestIR()
    {
        super();
    }

    // Internal variable for the property value.
    private var _data:Object;

    private var productName:Label;
    private var orderQty:TextInput;
    private var stockQty:TextInput;


    // Make the data property bindable.
    [Bindable("dataChange")]

    // Define the getter method.
    public function get data():Object
    {
        return _data;
    }

    // Define the setter method, and dispatch an event when the property
    // changes to support data binding.
    public function set data(value:Object):void
    {
        _data = value;
        invalidateProperties();
        dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
    }

    override protected function createChildren():void
    {
        super.createChildren();

        productName = new Label();
        // productName.visible = true;
        addChild(productName);

        orderQty = new TextInput();
        addChild(orderQty);

        stockQty = new TextInput();
        addChild(stockQty);

    }

    override protected function commitProperties():void
    {
        super.commitProperties();
        productName.text = _data.Name;
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);
        productName.move(0, 0);
        productName.setActualSize(250, 48);

        orderQty.move(270, 0);
        orderQty.setActualSize(100, 48);

        stockQty.move(390, 0);
        stockQty.setActualSize(100, 48);
    }

    override protected function measure():void
    {
        super.measure();

        measuredWidth = 490;
        measuredHeight = 48; 
    }
}

如您所见，这是相当轻量级的，但我的数据提供者包含超过 100 个项目，其中 11 个可以同时显示在屏幕上。我读到的关于提高滚动性能的所有内容都围绕着使用 opaqueBackground 和 cacheAsBitmap，但是无论我尝试什么都没有帮助。在列表级别使用 cacheAsBitmap 没有帮助，因为一旦您滚动超过几行需要重新渲染整个内容并在快速滚动时项目渲染器级别仍然非常慢 — 大概是因为在非常快速的滚动过程中许多项目被立即回收。

我知道 iPad 在帧中以 60 fps 的速度传输一屏信息应该没有问题，但是当我快速滚动时，我发现它很难达到 10 fps(从视觉上)。所以问题是:我是否遗漏了一些明显的东西，或者这是由于使用 AIR 时涉及的层数(和矢量渲染)而导致的？为了记录，我尝试过更改渲染模式对于应用程序并尝试更改帧速率以消除明显的问题。

Answer 1

这个有点猜测，但是itemRenderer可以优化吗？每次组件重绘时，是否所有子项都需要定位和调整大小？每次运行 commitProperties 时都需要更新 productName.text 吗？

以下是我可能会如何修改:

import mx.controls.listClasses.IListItemRenderer;
import mx.core.UIComponent;
import mx.events.FlexEvent;
import mx.utils.ColorUtil;

import spark.components.Label;
import spark.components.TextInput;

public final class OrderViewProductLineTestIR extends UIComponent implements IListItemRenderer 
{
    public function OrderViewProductLineTestIR()
    {
        super();
    }

    // Internal variable for the property value.

private var _data:Object;

// Add a dataChanged property 
private var dataChanged :Boolean = false

private var productName:Label;
private var orderQty:TextInput;
private var stockQty:TextInput;


// Make the data property bindable.
[Bindable("dataChange")]

// Define the getter method.
public function get data():Object
{
    return _data;
}

// Define the setter method, and dispatch an event when the property
// changes to support data binding.
public function set data(value:Object):void
{
    _data = value;
    // switch the dataChanged flag 
    dataChanged = true;
    invalidateProperties();
    dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
}

override protected function createChildren():void
{
    super.createChildren();

    productName = new Label();
    // productName.visible = true;
    addChild(productName);

    orderQty = new TextInput();
    addChild(orderQty);

    stockQty = new TextInput();
    addChild(stockQty);

}

override protected function commitProperties():void
{
    super.commitProperties();
    // Only update the display if the data actually changed 
    If(dataChanged){
      productName.text = _data.Name;
      dataChanged = false;
    }
}


// add variable to tell whether the component's children have been sized and positioned or not
// since they have static locations, no need to set these each time
protected var compChildrenSized :Boolean = false;
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    if(!compChildrenSized){
     productName.move(0, 0);
     productName.setActualSize(250, 48);

     orderQty.move(270, 0);
     orderQty.setActualSize(100, 48);

     stockQty.move(390, 0);
     stockQty.setActualSize(100, 48);

     compChildrenSized = true;
    }
}

override protected function measure():void
{
    super.measure();

    measuredWidth = 490;
    measuredHeight = 48; 
}
}

我想我要补充一点，我不确定测量是否会运行。如果将 textInputs 替换为标签会怎样？您使用的是 Flex 4.6，如果是，您使用的是 StyleableStageText(又名 StageText)还是使用 StyleableTextField 的 4.5 皮肤？我想知道 StageText 滚动是否会降低性能，因为它卡在 Flash 显示列表上方。

如果完全删除 textInput 并替换为标签会怎样？

这些都是小事，我不确定它们是否有帮助。