多階層コンポーネントによるパフォーマンス最適化

カスタムコンポーネント等を階層化して使用し場合、データ量によっては、
表示されるまでのパフォーマンスが低下する事があります。

アプリケーションのコーディングで出来ることは、以下3つと成るそうです。

■パフォーマンスチューニングプラン
１．生成順序機能の使用
２．遅延生成機能の使用
３．使用していないオブジェクトの破棄

それで、今回は一番効果的な「生成順序機能の使用」の検証を実施しました。

【生成順序機能の使用】
初期ビューでコンテナを作成する順序を設定すると、Flex アプリケーションの体感的な起動時間を短
縮できます。Flex のデフォルトの動作では、初期ビューでコンテナとその子オブジェクトすべてを作
成してから、すべてが同時に表示されます。すべてのコンテナとその子オブジェクトが作成されるま
では、ユーザーはアプリケーションを操作したり、重要なデータを表示したりできません。
場合によっては、1 つのコンテナのコンポーネントを表示してから次のコンテナのコンポーネントの
作成に移るようにすると、ユーザーの最初の操作感を向上させることができます。このプロセスは、
生成順序と呼ばれます。
生成順序機能を使用するには、次の例のように、コンテナの creationPolicy プロパティを queued
に設定します。

今回は、アプリケーションMXML(sample.mxml)から、カスタムコンポーネント（sampleList.mxml）を呼び出し、その中でActionScriptにて動的に、Vbox(sampleListItem.mxml)にデータを入れて作成しています。
呼び出しのデータは、HTTPServiceを使用し、sample1.xmlを読み込んでみます。

表示結果は、こんな感じです。





現在のままのソースだと、sample1.xmlのデータを500件程度にした場合、画面が表示されるまでに
10秒近く要してしまいます。

次に、sampleList.mxmlの以下のコメントアウトを外してみて下さい。

// aSlistItem.creationPolicy="queued";

全てのコンポーネントが生成された後に表示されるのではなく、インスタンス化されたコンポーネントから順次表示されているのが分かります。
初めのコンポーネントが表示されるまでに1秒程度でした。

ソースは、以下の感じです。

※sample.mxml

※sampleList.mxml

※sampleListItem.mxml

.articleListItem {
backgroundColor: #000000;
backgroundAlpha: 0.3;
verticalAlign: middle;
horizontalAlign: center;
dropShadowColor: #000000;
borderStyle: solid;
borderThickness: 0;
}

※vo.sampleVO.as

package vo
{
import mx.collections.ArrayCollection;

[Bindable]
public class sampleVO
{
public var sample_id:String;
public var title:String;

public function sampleVO(){

}


}
}

※sample1.xml

0001



0002



0003



0004



0005



0006

ご意見、ご感想等ありましたら、頂ければと思います。