Adobe Flex

Bom a pedido de muitos para que eu lançasse logo meu primeiro post foram muitas e aqui está. Gostaria de agradecer meu colega Ricardo por me enviar um belo post do Sean Moore, publicado no InsideRIA, sobre o trabalho de otimizar e descobrir melhores práticas em ActionScript 3.0 e Flex, usando o Flex Profiler. Achei bastante interessante e resolvi brevemente divulgar essas técnicas e traduzi-lás.
Antes de mostrar as técnicas, gostaria de falar rapidamente sobre a perspectiva Flex Profiler (imagem a seguir) dentro do Flex Builder 3, usada pelo Moore, ajuda a você ter uma noção de uso de memória, consumo de cada propriedade, chamada de método e instanciação de objetos dentro de sua aplicação.

Imagem da perspectiva Flex Profiler

Bom pode ter certeza que estarei dedicando um post sobre o Flex Profiler, mas por enquanto vamos ao que interessa neste post, que são as técnicas de melhores práticas e otimização.

Seguem elas:

1. Evite usar o operador new quando for criar Arrays

 var a = [];

Não use:

 var a = new Array ();

2. Criar arrays consome muito recurso, portanto conserve-os.

 var vanityCollection01: Array = new Array ();
 var vanityCollection02: Array = new Array ();
 var vanityCollection03: Array = new Array ();
 var vanityCollection04: Array = new Array ();

3. Maneira mais rápida de copiar um array:

 var copy : Array = sourceArray.concat();

4. Setar valores em arrays é lento:

 empregados.push(trabalhador);
 empregados[2] = trabalhador;

5. Resgatar valores de Arrays é duas vezes mais rápido do que setá-los:

 var trabalhador:Trabalhador = empregados[2];

6. Use métodos estáticos quando esses não precisam de uma instancia de objeto:

StringUtils.trim("Texto com espaço no final ");
Definição da classe:
package
{
     public final class StringUtils
     {
          public static function trim( s : String ) : String
          {
               var trimmed : String;
               // implementação...
               return trimmed;
          }
     }
}

7. Use const para propriedades (constantes), caso seu valor nunca irá mudar durante todo o ciclo de sua aplicação:

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

8. Use final quando a classe não pode conter herança, ou seja, não pode extende-la com outra classe.

public final class StringUtils

9. Nomes longos para métodos/variáveis não impacta na performance em ActionScript 3.0 (mas sim em outras linguagens).

algunsNomesLongosLoucosDeMetodoNaoFazRealmenteUmImpactoGrandeNaPerformance();

10. Uma linha atribuída NÃO compra nenhuma performance (mas sim em outras linguagens).

var i=0; j=10; k=200;

11. Não há diferença de uso de memória entre o uso de If ou Switch:

if ( condition )
{
     // manipula condição
}

IDENTICO USO DE MEMÓRIA:

switch ( condition )
{
     case "A":
         // logica para manipular caso A
     break; 

     case "B":
         // logica para manipular caso B
     break;
}

12. Use em suas condições If, uma ordenação a qual costuma ser mais verdadeira do que as outras:

if ( conditionThatHappensAlot )
{
     // logica para manipular condição que é encontrada frequentemente
}
else if ( conditionThatHappensSomtimes )
{
     // manipula caso essa é encontrada ocasionalmente
}
else
{
     // manipula caso essa não é muito necessária
}

13. AVM (ActionScript Virtual Machine) converte int para Number durante calculos dentro de loops (VM foi alterada, da versão 9 para 10, assim conversões de int, uint e Number não são mais lentas como costumavam ser).

14. Resolver problemas de conversão e de tipos de objetos incorretos.

15. Use uint moderadamente, ele pode ser lento (VM foi modificada, da versão 9 para 10, assim conversões de int, uint e Number não são mais lentas como costumavam ser).

var footerHex : uint = 0x00ccff;

16. Use inteiros para interações:

for (var i: int = 0; i < n; i++)
Não use:
for (var i: Number = 0; i < n; i++)

17. Não use inteiro com decimal:

var decimal : Number  = 14.654;

Não use:

var decimal : int  = 14.654;

18. Multiplicação x Divisão: em vez de usar 5000/1000 use: 5000*0.001

19. Em loops como for ou while, procure deixar expressões fora dos mesmos, para evitar que elas se repitam:

//errado
for (..){ a * 180 / Math.PI; }

//declare fora do loop:
toRadians = a*180/Math.PI;

20. Evite calcular e usar chamadas de métodos em loops:

var len : int = myArray.lengh;
for (var i=0; i < int; i++) { }

Não use:

for (var i=0; i < myArray.lengh;i++){ }

21. Use RegEx para validação e métodos de busca de strings:

// validação de codigo postal usando expressão regular
private var regEx:RegExp = /^[A-Z][0-9][A-Z] [0-9][A-Z][0-9]$/i;
private function validatePostal( event : Event ) : void
{
     if( regEx.test( zipTextInput.text ) )
     {
          // manipula caso o campo é inválido
     }
} 

// busca uma palavra usando métodos String
var string : String = "Search me";
var searchIndex : int = string.indexOf( "me" );
var search : String = string.substring( searchIndex, searchIndex + 2 );

22. Reutilize objetos para manter uma memória estável, DisplayObjects e objeto URLLoader.

23. Seguinte modelo de componente Flex:

createChildren();
commitProperties();
updateDisplayList();

24. Somente use DataGrids em último resurso (certifique-se se você pode montar uma List primeiro).

25. Evite Repeaters para rolagem de dados.

26. Evite o método setStyle() (Um dos métodos que mais consome recurso do framework Flex).

27. Usar muitos componentes, reduz drasticamente o desempenho de sua aplicação:

<mx:Panel>
    <mx:VBox>
        <mx:HBox>
            <mx:Label text="Label 1" />
             <mx:VBox>
                  <mx:Label text="Label 2" />
              </mx:VBox>
              <mx:HBox>
                  <mx:Label text="Label 3" />
                  <mx:VBox>
                      <mx:Label text="Label 4" />
                  </mx:VBox>
              </mx:HBox>
          </mx:HBox>
      </mx:VBox>
</mx:Panel>

28. Você pode fechar a tag de um componente simplesmente usando “/>”.

<mx:Image xmlns:mx="http://www.adobe.com/2006/mxml"
     source="avatar.jpg" width="200" height="200" />

29. Remova os componentes desnecessários para reduzir o aninhamento dos mesmos.

30. Evite: O componente VBox dentro de um Panel, sendo que ele possui a propriedade layout como vertical, horizontal ou absoluto, evitando assim uma redundancia.

<!-- Correto -->
<mx:Panel>
    <mx:Label text="Label 1" />
    <mx:Label text="Label 2" />
</mx:Panel> 

<!-- Não Use -->
<mx:Panel>
     <mx:VBox>
        <mx:Label text="Label 1" />
        <mx:Label text="Label 2" />
    </mx:VBox>
</mx:Panel>

31. Evite: O componente VBox dentro de um Application, sendo que ela possui a propriedade layout como vertical, horizontal ou absoluto, evitando assim uma redundancia.

<!-- Correto -->
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml>
    <mx:Label text="Label 1" />
    <mx:Label text="Label 2" />
</mx:Application>

<!-- Não Use -->
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml>
    <mx:VBox>
        <mx:Label text="Label 1" />
        <mx:Label text="Label 2" />
    </mx:VBox>
</mx:Application>

32. Setar a propriedade recycleChildren como true para melhorar a performance de objetos Repeaters.
(A reutilização usada, criou filhos ao em vez de criar novos objetos).

<mx:Script>
    <![CDATA[
        [Bindable]
        public var repeaterData : Array = ["data 1", "data 2"];
    ]]>
</mx:Script> 

<mx:Repeater id="repeater" dataProvider="{repeaterData}">
    <mx:Label text="data item: {repeater.currentItem}"/>
</mx:Repeater>

33. Trave seu framerate em 60fps ou menor:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml
    frameRate="45">
</mx:Application>

34. Evite mostrar multiplas manipulações por frame.

35. Use o evento ENTER_FRAME ao em vez do evento Timer:

public function onEnterFrame( event : Event ) : void
{
}
private function init() : void
{
     addEventListener( Event.ENTER_FRAME, onEnterFrame );
}

Não use:

public function onTimerTick( event : Event ) : void
{
}
private function init() : void
{
     var timer : Timer = new Timer();
     timer.start();
     timer.addEventListener( TimerEvent.TIMER, onTimerTick );
}

36. Para adiar a criação de um objeto para vários frames use:

<mx:Container creationPolicy="queued"/>

37. Alpha = 0 não é o mesmo que visible = false (Objetos marcados como invisivel são ignorados).

loginButton.visible = false;

Não use:

loginButton.alpha = 0;

Outras Referencias citadas por Sean:

Sean Christmann: Optimizing Adobe AIR for Code Execution, Memory, and Rendering
http://www.craftymind.com/2008/11/20/max-2008-session-material/

Dennis Ippel: Some ActionScript 3.0 Optimizations
http://www.rozengain.com/blog/2007/05/01/some-actionscript-30-optimizations/

Shane McCartney: Tips on how to write efficient AS3
http://www.lostinactionscript.com/blog/index.php/2008/09/28/tips-on-how-to-write-efficient-as3/

Flex Application Performance: Tips and Techniques for Improving Client Application Performance
http://www.adobe.com/devnet/flex/articles/client_perf.html

Stephen Calender: ActionScript 3.0 Benchmarking
http://www.stephencalenderblog.com/?p=7

Grant Skinner: Types in AS3: ints not so fast, uints slow!
http://www.gskinner.com/blog/archives/2006/06/types_in_as3_in.html

Grant Skinner: Resource management strategies in Flash Player 9
http://www.adobe.com/devnet/flashplayer/articles/resource_management.html

Gary Grossman: ActionScript 3.0 and AVM2 Performance Tuning
http://www.onflex.org/ACDS/AS3TuningInsideAVM2JIT.pdf

Fastest way to copy an array
http://agit8.turbulent.ca/bwp/2008/08/04/flash-as3-optimization-fastest-way-to-copy-an-array/

Andre Michelle: AS3 optimations & suggestions
http://blog.andre-michelle.com/2005/as3-optimations-suggestions/

Package-level function closures in ActionScript
http://www.ericfeminella.com/blog/2008/05/06/package-level-function-closures-in-actionscript/

ActionScript 3 optimization techniques
http://blog.joa-ebert.com/2008/04/26/actionscript-3-optimization-techniques/

AS3 Performance Tester
http://businessintelligence.me/projects/performance_tester/performanceTester.html