显示文本的优化方式

时间:2012-08-26 07:37:52

标签: performance flex itemrenderer

我正在优化在Rect中显示字符的项目渲染器,我注意到动态设置文本的动作很慢,现在我正在考虑创建带有文本硬编码的预制对象项目渲染器有一个开关来选择正确的文本对象而不是使用.text =,有没有人对如何优化渲染器有任何其他想法,它是一个瓷砖布局,在屏幕上显示大约100个渲染器。

也 - 我可以在渲染器中使用的最便宜(性能 - wize)文本对象是什么?

谢谢

<!-- DNA Plus -->
<s:Group height="26" width="100%" y="20">
    <s:Rect id="backgroundTop" left="0" right="0" top="0" bottom="0"
            alpha="{(data as MiniBrick).brick.strand == StrandEnum.PLUS.value ? 1 : 0.7}">
        <s:fill>
            <s:SolidColor id="bgFillTop" color="{BrickColors.getColor((data as MiniBrick).brick)}"/>
        </s:fill>
    </s:Rect>

    <s:Rect id="selectedBackgroundTop" left="0" right="0" top="2" bottom="1" includeIn="selected">
        <s:fill>
            <s:SolidColor id="sBgFillTop" color.selected="0xB6E0F2"/>
        </s:fill>
    </s:Rect>

    <!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
    <s:Label id="textDisplayTop" width="100%" top="4" fontFamily="Consolas" text="{(data as MiniBrick).origin}"
             fontSize="20" lineBreak="explicit" verticalAlign="middle" textAlign="center"/>
</s:Group>


<!-- DNA Minus -->

<s:Group height="26" width="100%" y="46">
    <s:Rect id="backgroundBottom" left="0" right="0" top="0" bottom="0" 
            alpha="{(data as MiniBrick).brick.strand == StrandEnum.MINUS.value ? 1 : 0.7}">
        <s:fill>
            <s:SolidColor id="bgFillBottom" color="{BrickColors.getColor((data as MiniBrick).brick)}"/>
        </s:fill>
    </s:Rect>

    <s:Rect id="selectedBackgroundBottom" left="0" right="0" top="1" bottom="2" includeIn="selected">
        <s:fill>
            <s:SolidColor id="sBgFillBottom" color.selected="0xB6E0F2"/>
        </s:fill>
    </s:Rect>

    <!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
    <s:Label id="textDisplayBottom" width="100%" top="4" fontFamily="Consolas" text="{DnaDictionary.getComplementSequenceOneLetter((data as MiniBrick).origin)}"
             fontSize="20" lineBreak="explicit" verticalAlign="middle" textAlign="center"/>
</s:Group>

<!-- DNA index [tick list] -->
<s:Group width="15" id="dnaTick" y="72">
    <s:Rect horizontalCenter="0" width="2" height="2" radiusX="1">
        <s:fill>
            <s:SolidColor color="#666666"/>
        </s:fill>
    </s:Rect>
    <s:Label id="dnaTickLabel" horizontalCenter="0" y="5" height="9" color="#888888" fontFamily="Arial" fontSize="9"
             textAlign="left" />
</s:Group>

<s:Line id="firstMiniBrickInBrickLine" x="0" y="20" yFrom="72">
    <s:stroke>
        <s:SolidColorStroke caps="none" color="#FFFFFF" weight="1"/>
    </s:stroke>
</s:Line> 

1 个答案:

答案 0 :(得分:0)

直接回答您的问题:显示文本的最佳方式是使用UITextField类。但是你很难在ItemRenderer中实现它,因为它不会从UIComponent继承。

这也不是代码中获得最大性能提升的地方。最大的问题是这个渲染器中有6个数据绑定。如果屏幕上有100个项目,那么600个听众会观察数据更改。

所以你应该删除所有这些绑定并通过覆盖ItemRenderer的data setter来设置这些属性,如下所示:

override public function set data(value:Object):void {
    super.data = value;

    var brick:MiniBrick = value as MiniBrick;
    backgroundTop.alpha = brick.brick.strand == StrandEnum.PLUS.value ? 1 : 0.7;
    bgFillTop.color = BrickColors.getColor(brick.brick);
    ...
}

如果您想进一步优化,我建议您将渲染器的信息直接放在数据上,这样就不必每次都进行评估,您可以编写以下内容:

override public function set data(value:Object):void {
    super.data = value;

    var brick:MiniBrick = value as MiniBrick;
    backgroundTop.alpha = brick.alpha;
    bgFillTop.color = brick.color;
    ...
}