Tweet

Flashを閃光のごとく高速化するための基礎知識

Flashチューニングが必要となる3つのパターン

　とはいえ、やみ雲にチェックをしても効率が悪いので、チューニングが必要なパターンを大まかに分けて当たりを付けるのがいいでしょう。考え方は人それぞれですが、筆者が考える大まかなパターンを以下に示します。

　大体このどれかのパターンに収まることが多いです。まずは、ざっくりと怪しい場所を見つけていきましょう。

□ 【1】「だんだん重くなる」パターン

　放置し続けたり、操作を繰り返していくと、だんだんと処理が重くなっていくパターンです。主に参照上のゴミやGCの兼ね合いによって引き起こされます。想定ユーザー滞在時間によっては問題になりにくいですが、放置するとPCが固まるので。注意が必要です。

□ 【2】「タイミングで重くなる」パターン

　操作時のアニメーションや、外部ファイルの読み込みの処理など、何らかのイベントが発生した際に重くなるパターンです。トリガが明確であるため、最も当たりを付けやすいパターンといえます。

□ 【3】「常に重い」パターン

　インタラクションに関係なく、常に重くフレームレートが低くなってしまうパターンです。カメラインタラクションや動画、アニメーションの処理など、TimerクラスやENTER_FRAMEイベントを用いた処理が原因である可能性が高いです。

重い処理をピンポイントで探るコーディングテクの一例

　処理負荷が高そうな場所に当たりが付いたら、どのシンタックスにどの程度時間がかかっているかを細かく調べます。その際に、ピンポイントで処理時間を調べる方法として、trace関数とgetTimer関数を使うのが最も簡単です。

　例えば、for文の処理時間を調べる場合には、以下のように記述します。

// 現在時刻のタイマーを取得
var now:Number = getTimer();
// 1 から 1000000 までの合計値を計算する
var total = 0;
for( var i = 1; i < 1000000; i++ ){
   total += i;
}
// 処理にどの程度かかったかを調べる
trace( getTimer() - now );

　前述のFlex Builder（Flash Builder）やFlash IDE（Flash Professional）などの開発環境／オーサリングツールを持っている読者は、上記のコードをコピーして実行してみてください。処理に何ミリ秒かかったかをこれで知ることができます。

　マシンパワーが高すぎると、「0」と表示されるかもしれませんが、その際には再帰回数を100万回から1000万回に増やすなどして試してみてください。

　また、この処理は「チューニングによって、どの程度の速度改善がされたか」を調べる方法としても有用です。

ActionScriptチューニングにおける改善点

　重そうな処理を発見したら、次は重い原因を探ります。

1. 処理順序
2. 型
3. 変数や関数へのアクセス頻度
4. キャッシュ処理
5. 通信の処理タイミング
6. イベント処理
7. アルゴリズム

　などなど、チェックすべき点は多岐にわたります。

□ 型1つで処理時間が10倍以上変わってしまう

　例えば、前述のfor文の処理に関していえば、型が指定されていないことが遅い原因として考えられるので、型を設定してあげるだけで劇的に早くなります。

var now:Number = getTimer();
// total の型を uint にする.
var total:uint = 0;
// i の型を uint にする.
for( var i:uint = 1; i < 1000000; i++ ){
   total += i;
}
trace( getTimer() - now );

　この処理だけで、筆者の環境では、400msが30msまで高速化されました。「型を適切に指定してあげるかあげないか」、この違いだけで10倍以上の速度差が出てしまいます。

　なぜここまで差が出るかを正確に説明しようとすると、型解決・型推論といった比較的専門的な話を含むので、ここでは詳細は割愛します。

　例えば、仕分け作業をお願いされたときに、「開けるまで中身が分からないもの」と「中身が書いてあるもの」だったら、後者の方が作業は格段に楽ですよね、そんなイメージです。

　スクリプト言語での開発に慣れてしまうと、型を正確に書くことを忘れがちですが型1つでここまで処理時間が変わってしまうことは、理解しておいて損はないでしょう。

□ 速度チェックができるアプリを試そう

　参考までに、実際に速度チェックができるアプリケーションを作るためのテンプレートを「wonderfl」（面白法人カヤックが運営する、Flashアプリを作ることのできるオンラインサービス）にて作成しましたので、興味がある方は以下を実行してみてください。

　テンプレートのため、このまま実行しても意味が分からないと思います。上記リンクから「wonderfl」のサイトに行くと、コードを確認できます。「wonderfl」のアカウントをお持ちでしたら、このテンプレートを基に、計測するコードを埋め込むようにFORK（コードの改編）して、色々な処理の時間を試してみてはいかがでしょうか。

　また、今日紹介したサンプルFlashアプリのように実行速度を計測できるプログラムサンプルが、「wonderfl」にもポストしてありますので、興味がある方はご覧ください。

まだまだ初歩の初歩、次回から役立つテク満載！

　いかがだったでしょうか。普段からデバッグやチューニングをされている方には、少々物足りなかったかもしれません。次回以降は、重くなりやすい処理の実例を挙げながら「なぜ重いのか」「複合的な要因があるか」「より軽くなる方法が存在するか」「どの程度効果があるか」を具体的に解説していく予定です。

　次回は、MovieClip関連の処理に関して、もろもろ解説できればと考えています。これからの連載もよろしくお願いします。

□ ＠IT関連記事

作って学ぶAIRウィジェットの基礎→応用 最近よく聞くAdobe AIRって何だっけ？ ウィジェットを簡単に作れるらしいけど…… と曖昧な知識のあなたに贈る超入門連載。楽しいサンプルを作って基礎から応用まで学ぼう

現場で使えるFlex実践テクニック 本連載では、Flex開発で基本となる特徴的な機能から一歩進んで、実開発の現場でよく使われるテクニックについて、より実践的に解説します

画像とコードの触媒Flash Catalystについて語りますと WebとUIをつなぐトリックスター（3）　先月発表があったアドビの新ツールFlash CatalystとFlex Builder 4を実際に使ってみた。その感想とアドビ社員たちが語ったことを紹介しよう デザインハック ＜ リッチクライアント 2008/12/26

Flash CS5のiPhoneアプリ変換機能は無駄にならない D89クリップ（15）　Flash CS5製とiPhone SDK製のアプリの違いや、Flash Lite 4.0などFlashプラットフォームのモバイル対応について、Flashのエバンジェリストに聞いた デザインハック ＜ リッチクライアント 2009/12/24

WebデザイナのためのHTMLチューニング入門 Webサイトを見た人の印象を良くするのか悪くするのかには“速度”が大きくかかわってきます。FirefoxのプラグインYSlowで測る7つの計測ポイントから“速い” HTMLの書き方を学びましょう 「デザインハック」コーナー

河北 啓史（かわきた ひろふみ） WebサイトのHTML/CSS/Flash/JavaScriptといったフロント部分の開発やUI制作のディレクションを担当。現在は、UI検証のためのプロトタイプ作りや実験的なUIのモックアップ作成といった細かいものから、「サグールテレビ」のような大規模のFlashプロジェクトまで幅広く担当している

2/2

INDEX
速いFlash/ActionScriptチューニング入門（1）　 Flashを閃光のごとく高速化するための基礎知識
	Page1 Flashを徹底的に軽く作るための3カ条 Flash処理負荷計測における3つの基準 処理が重い個所を探すための3つのツール
	Page2 Flashチューニングが必要となる3つのパターン 注意！　「重いのは本当にFlashか？」 重い処理をピンポイントで探るコーディングテクの一例 また注意！　「Flash Playerの種類・バージョンも考慮せよ」 ActionScriptチューニングにおける改善点 まだまだ初歩の初歩、次回から役立つテク満載！

「デザインハック」コーナーへ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード