Flex4性能优化 转

Flex4性能优化总结

作者：hangge | 2014-11-07 15:50

为保证Flex程序运行的流畅，高效。本人总结了一下几条技巧：
1，当创建一个数组的时候避免用new操作符,用var a:Array = [];而不用var a:Array = new Array();

2，快速的复制一个数组： 

var copy:Array = sourceArray.concat ();
 

 3，在整个程序的生命周期中都不会改变的变量用const定义常量 

public const APPLICATION_PUBLISHER : String = "Company, Inc. ";
 

 4，当一个类不需要有子类的时候应该将该类声明为final类型的 

public final class StringUtils
 

 5，尽量避免使用setStyle（）方法，这个方法在Flex框架里面是众多代价昂贵的方法之一。

6，能用ENTER_FRAME事件就不用Timer事件 

//使用
public function onEnterFrame(event:Event) : void { }
private function init():void {
    addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
 
//而不使用Timer
public function onTimerTick(event:Event) : void { }
private function init():void {
    var timer:Timer = new Timer();
    timer.start();
    timer.addEventListener(TimerEvent.TIMER, onTimerTick);
}
 

7，对于自定义的ItemRenderer，如果不需要背景透明，或者使用自己绘制背景。

建议把opaqueBackground属性设置成一个固定的颜色，这样渲染器能够忽略透明度计算提高性能。

而且如果绘制自己的背景，那么把autoDrawBackground设置成false, 这一操作将会指示Flex不要浪费时间来绘制一个你无论如何都会覆盖的默认背景。

比如下面这个例子，ItemRenderer里面使用自行绘制的渐变背景。我们就可以吧autoDrawBackground设置成false，同时opaqueBackground随便设置成一个固定的值。

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                opaqueBackground="0x000000"
                autoDrawBackground="false">
    
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="#FF0000" ratio="0"/>
                <s:GradientEntry color="#DD0000" ratio=".66"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <s:Label id="labelDisplay" left="5" right="5" top="15" bottom="15"/>
        
</s:ItemRenderer>
 

8，ItemRenderer内部设置数据的时候，避免使用绑定，因为使用绑定的话会调用额外的ActionScript代码。通常，我们可以通过覆盖set data方法来设置数据。 
比如，原来通过绑定是这样：

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark">  
    <s:Label id="姓名" value="{data.name}"  fontSize="12"/>
</s:ItemRenderer>
 
我们可以改成用set data的方式：

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark">  
    <fx:Script>
        <![CDATA[           
            override public function set data(value:Object):void
            {
                super.data = value;
                
                if (data)
                {
                    nameLab.text = data.name;
                }
                else
                {
                    nameLab.text = "";
                }
            }           
        ]]>
    </fx:Script>
    <s:Label id="nameLab" value="{data.name}"  fontSize="12"/>
</s:ItemRenderer>
 

9，ItemRenderer内部如果要显示外部图像时，使用共享图像缓存ContentCache 
使用共享图像缓存ContentCache，使得图像加载过一次以后，在外部视图滚动的时候不必重新加载。使用方法：声明一个静态的ContentCache实例，并将它设置给任一个BitmapImage组件的contentLoader属性，这样该类型的所有渲染器将共享这个ContentCache实例，自动地加载并缓存图像。

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                initialize="initializeHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            
            import spark.core.ContentCache;
            
            static private const iconCache:ContentCache = new ContentCache();
            
            private function initializeHandler(event:FlexEvent):void
            {
                icon.contentLoader = iconCache;
            }
            
            override public function set data(value:Object):void
            {
                super.data = value;
                
                if (data)
                {                  
                    icon.source = data.imageUrl;
                }
                else
                {
                    icon.source = null;
                }
            }
 
            
        ]]>
    </fx:Script>
 
    <s:BitmapImage id="icon" top="10" left="5" width="32" height="32" />
        
</s:ItemRenderer>
 

10，使用Group取代BorderContainer 
BorderContainer是一种可以绘制边框和背景的容器，但有时我们可以使用包含一个Rect的Group来获得相同的效果，并获得更好的性能。

比如原来我们是这么使用BorderContainer：

<s:BorderContainer width="200" height="200"
     backgroundColor="#CCCCCC" borderColor="#999999">
</s:BorderContainer>
 
现在可以使用Group来实现同样的效果：

<s:Group width="200" height="200">
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor color="#CCCCCC"/>
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke color="#999999"/>
            </s:stroke>
    </s:Rect>
</s:Group>
 

11，如果要隐藏页面上组件，使用includeIn或者excludeFrom，而不是设置visible属性 
使用includeIn和excludeFrom将不应该可见的组件从显示列表中删除，就不会再对它们进行渲染处理。 相反，如果将visible设置为false，那么组件将仍然保留在显示列表上，这样需要执行不必要的布局操作和渲染。

12，显示嵌入图像，使用BitmapImage而不是Image

BitmapImage组件是一个轻量级版本的Image组件。 这两个组件都能够显示嵌入式的图像组件。

两者之间最大的差异是：1，Image能够运行时加载外部图像，而BitmapImage需要一些设置才能加载外部图像。2，与BitmapImage不同，Image的皮肤也是可换的并且支持丢失图像指示器。 对于嵌入图像，不需要这些功能，应该使用轻量级的BitmapImage组件。

比如，原来使用Image组件来显示：

<s:Image source="@Embed('assets/bg.jpg')"/>
 
可以使用BitmapImage来代替：

<s:BitmapImage source="@Embed('assets/bg.jpg')"/>
 

13，使用png格式的图片，而不是gif或jpeg格式的图片
 运行时对PNG文件格式进行解码时速度要快得多，如果可以的话，应该尽可能使用PNG来代替GIF和JPEG图片。

14，需要矩形阴影或圆角矩形阴影的话。使用RectangularDropShadow，而不是DropShadowFilter。

<s:Group width="300" height="150" horizontalCenter="0" verticalCenter="0">
    <s:RectangularDropShadow id="dropShadow" blurX="10" blurY="10" alpha="0.5" distance="3"
         angle="90" color="#000000" left="0" top="0" right="0" bottom="0" blRadius="8" brRadius="8"
         tlRadius="8" trRadius="8" />
</s:Group>
 

 15，如果不需要的话，把这四个属性设为false可以节约资源，提高效率

this.mouseChildren = false;
this.mouseEnabled = false;
this.tabChildren = false;
this.tabEnabled = false;
 

原文出自：www.hangge.com  转载请保留原文链接：http://m.hangge.com/news/cache/detail_403.html