2012年4月2日月曜日

UI部品数が多いView表示の高速化

Titanium Mobileに限らず、iOS用のアプリ開発では、シミュレータで動作確認した後、実機に転送して確かめます。実機での動作で問題となるのが、シミュレータよりも遅い点です。開発に使っているのはMacBook Airの13インチ(Intel Core i5, dual 1.7GHz)で、Macとしては遅いほうに分類されます。そんなマシン上のエミュレータでさえ、iPadの実機よりも高速なのです。実機上のテストで遅いと、なんとか改良しなければなりません。

 

アプリでは複数のWindowやViewを扱いますが、UI部品が増えるほど描画が遅くなります。その限界は意外に少なく、View上に数十点のUI部品を付けると、気付く程度には遅くなります。今回は理由があって、あるViewだけは100個以上のUI部品を用いました。そのViewだけは、明らかに遅いです。

今回のアプリで描画が遅いのには、少し別な理由もあります。メモリーを節約しようと、描画が終わったらViewを破棄して、再度表示するときでも新しく生成し直しているのです。つまり、Viewを表示するたびに、UI部品まで含めて生成しています。このようなViewを、1つのWindow上で複数切り替えながら、使い分けています。Window上の一部だけ切り替えるため、Viewを切り替える方法がベストなのです。

生成するのがViewでなくWindowならば、openやcloseのタイミングで表示内容を描きます。しかしViewの場合は、openやcloseが用意されてなくて、別な方法で似たような機能を実現しなければなりません。それをせずに毎回生成すると、UI部品を1つずつ足しながら描いていくため、どうしても表示が遅くなってしまいます。

Viewでのopenやcloseの代わりは、showとhideでしょう。windowなら、最初からcloseした状態で生成されますが、Viewはshowした状態で生成されます。これを防ぐために、Viewを生成した直後にhideするか、hideした状態で生成します。試してみましたが、直後にhideする方法でも問題ないようです。通常は、Viewをshowした状態で生成するような関数を使ってますから、直後にhideする方法で問題ないなら、生成関数が1つで済むため都合がよいのです。具体的なJavaScriptは、次のようになります。

// view1を生成直後にhideする
var view1 = bbb.createViewF(win, 768, 768, 0, 0);
view1.hide();
// UI部品を加える
var label1 = bbb.createLblF(view1, 'ラベル', 14, 'right', 20, 100, 10, 580);
var Button1 = bbb.createBtnF(view1, 'ボタン', 24, 40, 200, 180, 150);
// UI部品を加え終わったら、view1を表示させる
view1.show();

この方法を初代iPadで試したところ、UI部品が数十個のViewでは、違いが分かるほど高速化できました。しかし、UI部品が100個以上あるViewでは、高速化にも限界がありました。Viewが現れるまで2秒弱ほど待たされます。それでも、hideせずに描くよりは充分に高速化されています。この状態で我慢してもらうしかないのでしょうね。

初代iPadはRAM容量が少ないため、メモリーを節約するような作り方をしないと不安です。画面表示が少しは高速化できたので、この方法で最後まで進めたいと思います。

0 件のコメント:

コメントを投稿