顯示文本的優化方式

Question

我正在優化在Rect中顯示字符的項目渲染器的過程中，我注意到動態設置文本的動作很慢，現在我正在考慮用文本創建預製對象編碼在他們和內部的項目渲染器有一個開關來選擇適當的文本對象，而不是使用.text =，沒有人有任何其他想法如何優化渲染器，它是一個瓷磚佈局，在屏幕上顯示約100個渲染器。

另外 - 什麼是我可以在渲染器中使用的最便宜的（performance-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> 

Answer 1

直接回答你的問題：最優化的方式來顯示文本是使用UITextField類。但是您將很難將其實現到您的ItemRenderer中，因爲它不會從UIComponent繼承。

此外，這不是您的代碼中獲得最大性能收益的地方。最大的問題是這個渲染器有6個數據綁定。如果屏幕上有100個項目，則可以讓600個聽衆觀看數據更改。

所以，你應該刪除所有這些綁定，並通過覆蓋itemRenderer的data二傳手，像這樣設置這些屬性：

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; 
    ... 
}