2009/05/01

AS3, Flex最適化テクニック&プラクティス総まとめ

InsideRIAで公開されていたSean Moore氏による記事「Round up of ActionScript 3.0 and Flex optimization techniques and practices」をだいぶ適当に訳してみた。

Round up of ActionScript 3.0 and Flex optimization techniques and practices
http://www.insideria.com/2009/04/51-actionscript-30-and-flex-op.html


AS3, Flex最適化テクニック&プラクティス総まとめ
1. Avoid the new operator when creating Arrays
Arrayを生成する際に、new演算子の使用は避ける。
var a = []; 

悪い例:
var a = new Array();


2. Arrays are expensive to create, do so conservatively
Arrayの生成コストは高いので、控える。
var vanityCollection01 : Array = new Array(); 
var vanityCollection02 : Array = new Array();
var vanityCollection03 : Array = new Array();
var vanityCollection04 : Array = new Array();


3. Fastest way to copy an array:
Arrayをコピーする最速の方法。
var copy : Array = sourceArray.concat(); 


4. Setting values in Arrays is slow
Arrayへの値の設定は遅い。
employees.push( employee ); 
employees[2] = employee;


5. Getting values from Arrays is twice as fast as setting
Arrayから値を取得するのは設定より2倍ほど速い。
var employee : Employee = employees[2]


6. Use static for properties methods that do not require an object instance
インスタンスを必要としないプロパティ、メソッドにはstaticを使う。
StringUtils.trim( "text with space at end " ); 
Class definition:
package
{
public final class StringUtils
{
public static function trim( s : String ) : String
{
var trimmed : String;
// implementation...
return trimmed;
}
}
}


7. Use const for properties that will never change throughout the lifecycle of the application
アプリケーションのライフサイクルを通して、変更の無いプロパティにはconstを使う。
public const APPLICATION_PUBLISHER : String = "Company, Inc."; 


8. Use final when no subclasses need to be created of a class
サブクラスを作成する必要がないクラスにはfinalを使う。
public final class StringUtils 


9. Length of method/variable names doesn't matter in ActionScript 3.0 (true in other langs)
メソッド名/変数名の長さはActionScript 3.0では問題にはならない。
someCrazyLongMethodNameDoesntReallyImpactPerformanceTooMuch(); 


10. One line assignments DO NOT buy any performance (true in other langs)
代入を1行にまとめたところでパフォーマンスは向上しない。
var i=0; j=10; k=200; 


11. No difference in memory usage between an if statement and a switch statement
if文とswitch文では、メモリ使用量に差はない。
if ( condition ) 
{
// handle condition
}

まったく同じ:
switch ( condition ) 
{
case "A":
// logic to handle case A
break;

case "B":
// logic to handle case B
break;
}


12. Rank your if statements in order of comparisons most likely to be true
if文の条件はtrueとなる可能性の高い順に並べる。
if ( conditionThatHappensAlot ) 
{
// logic to handle frequently met condition
}
else if ( conditionThatHappensSomtimes )
{
// handle the case that happens occaisonally
}
else
{
// handle the case that doesn’t happen that often
}


13. AVM promotes int to Number during calculations inside loops
(VM has been changing, from 9 to 10, so int, uint and number conversions aren't as slow as they used to be.)
AVMはループ内での計算中にintをNumberに変換する。(VMが9から10に代わって、int, uint, Numberの変換はそれほど遅くはなくなった。)

14. Resolve issues of promotion, unknown, or incorrect object types
変換、未知の型、不正な型の問題を解決すること

15. Use uint sparingly, it can be slow (VM has been changing, from 9 to 10, so int, uint and number conversions aren't as slow as they used to be.)
uintは慎重に使う。注意しないと遅くなることがある。(VMが9から10に代わって、int, uint, Numberの変換はそれほど遅くはなくなった。)
var footerHex : uint = 0x00ccff; 


16. Use integers for iterations
反復の判定にはintを使う。
(var i: int = 0; i < n; i++) NOT for (var i: Number = 0; i < n; i++) 


17. Don't use int with decimals
少数値を扱うためにintを使わない。
var decimal : Number  = 14.654; 

悪い例:
var decimal : int  = 14.654; 


18. Multiply vs. Divide: instead of 5000/1000 use: 5000*0.001
乗算 vs 除算: 5000/1000の代わりに、5000*0.001を使う。

19. Locally store function values in for and while statements instead of repeatedly accessing them
for、while内で繰り返し計算させるよりも、ループ外でローカル変数に入れておき、それを使用する。
for (..){ a * 180 / Math.PI; }  
declare: toRadians = a*180/Math.PI; outside of the loop


20. Avoid calculations and method calls in loops
ループの中で計算やメソッド呼び出しをしない。
var len : int = myArray.lengh;  
for (var i=0;i<len;i++){ }

悪い例:
for (var i=0;i< myArray.lengh;i++){ } 


21. Use RegEx for validation, use string methods for searching
バリデーションにはRegEx(正規表現)を使い、検索にはStringのメソッドを使う。
// postal code validation example using regular expressions 
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 ) )
{
// handle invalid input case
}
}

// search a string using String methods
var string : String = "Search me";
var searchIndex : int = string.indexOf( "me" );
var search : String = string.substring( searchIndex, searchIndex + 2 );


22. Reuse objects to maintain a “memory plateau” DisplayObjects, URLLoader objects
メモリ使用量を抑えるために、DisplayObject、URLLoaderオブジェクトは再利用する。

23. Follow the Flex component model:
Flexのコンポーネントモデルに従う。
createChildren(); 
commitProperties();
updateDisplayList();


24. Only use Datagrids as a last resort (make sure you can’t implement in a regular List first)
DataGridは最後の手段として使う。(まずは通常のListで実現できないか確かめる)

25. Avoid Repeaters for scrollable data
スクロールデータにRepeaterの使用は避ける。

26. Avoid the setStyle() method (One of the most expensive calls in the Flex framework)
setStyle()メソッドの使用は避ける。(setStyle()メソッドはFlexフレームワークの中で高コストな呼び出しの一つ)

27. Using too many containers dramatically reduces the performance of your application
使用するコンテナが多過ぎるとパフォーマンスが著しく低下する恐れがある。
<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. You do not need to always use a container tag as the top-level tag of components Totally valid component, no top level container needed:
コンポーネントのトップレベルに、常にコンテナを使う必要はない。
<mx:Image xmlns:mx="http://www.adobe.com/2006/mxml"  
source="avatar.jpg" width="200" height="200" />


29. Remove unnecessary container wrappers to reduce container nesting
コンテナのネストを減らし、不必要なコンテナを削除する。

30. Avoid: The VBox container inside an tag, (eliminates redundancy)
コンテナタグ内の無駄なVBoxの使用は避ける。
<mx:Panel> 
<mx:Label text="Label 1" />
<mx:Label text="Label 2" />
</mx:Panel>
<mx:Panel>
<mx:VBox>
<mx:Label text="Label 1" />
<mx:Label text="Label 2" />
</mx:VBox>
</mx:Panel>


31. Avoid: VBox container inside an mx:Application tag, (eliminates redundancy)
mx:Applicationタグ内の無駄なVBoxの使用は避ける。
<?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>

悪い例:
<?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. Set the recycleChildren property to true to improve a Repeater object's performance (re-uses previously created children instead of creating new ones)
Repeaterオブジェクトのパフォーマンス向上のため、recycleChildrenプロパティにtrueを設定する。(新しいRepeater対象オブジェクトを生成する代わりに、前に生成されたオブジェクトを再利用する)
<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. Keep framerate set at 60 fps or lower
フレームレートは60fpsかそれ以下にする。
<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml
frameRate="45">
</mx:Application>


34. Avoid multiple display manipulations per frame
フレーム毎に複数の表示操作を行うのは避ける。

35. Code against ENTER_FRAME events instead of Timer events
Timerイベントの代わりに、ENTER_FRAMEイベントを使う。
public function onEnterFrame( event : Event ) : void 
{
}
private function init() : void
{
addEventListener( Event.ENTER_FRAME, onEnterFrame );
}

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


36. To defer object creation over multiple frames use:
複数フレームに及ぶオブジェクト生成を遅らせる際に、"queued"を指定する:
<mx:Container creationPolicy="queued"/>


37. Alpha = 0 is not the same as visible = false (Objects marked invisible are passed over)
Alpha = 0は visible = falseと同等ではない。(非表示マークが付けられることではない)
loginButton.visible = false;

悪い例:
loginButton.alpha = 0; 


ここに挙げた以外にFlex/AIR, ActionScriptのパフォーマンス最適化についてまとめられている記事がいくつかあるのでリストしておきます。
Flex アプリケーションのパフォーマンス : クライアントアプリケーションのパフォーマンスチューンアップテクニック集
http://www.adobe.com/jp/devnet/flex/articles/client_perf.html

ActionScript 3.0におけるパフォーマンス向上のヒント
http://www.adobe.com/jp/devnet/flash/articles/ac3_performance.html

Round up of ActionScript 3.0 and Flex optimization techniques and practices」記事の参照元
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

0 件のコメント: